CODEWITHSUNDEEP
css
Spokes
Spokes

Reputation: 126

Largest possible margin value in CSS?

I'm using a CSS trick involving setting "margin-bottom" and "padding-bottom" to very large values in order to extend a sidebar to the footer. I'm encountering a situation where the margin value that I was previously using is turning out to be insufficient.

Is there an upper limit to the value that you can assign to the margin property in CSS? Will using really large values have any impact on rendering efficiency/speed or browser stability? Thanks.

EDIT: here is a distillation of the approach that I was describing: Holy grail layout with 100% height

Upvotes: 1

Views: 249

Answers (2)

nu everest
nu everest

Reputation: 10249

My recommendation would be to look at current monitor resolutions and set your value greater than the typical monitor resolution that you expect your users to have. For instance, lets say you don't expect to have users with monitors greater than 4K UHD. The resolution of 4K UHD is 3840 × 2160 pixels. You could use 4000px as your upper bound.

Also for Consideration:

  • W3C standard seems mute on this point.

  • I've also noticed that some browsers can freeze if the value is too high. A padding (not margin) value of 99999999px sometimes locked chrome in one of my tests.

  • It is also possible to use units of centimeter (cm)

    margin: 100000000cm; \\ 1,000 km of margin in all directions.

    That would require a huge monitor.

  • Something also worth considering is that floats are valid inputs e.g. margin: 1.999rem.

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

I suspect that most browsers respect the value ranges typically found for integers and floating numbers as you might see in languages like C/C++/C# and Java and JavaScript.

Also, these ranges will vary if you are on a 32-bit versus 64-bit architecture.

In short, there are limits, I am not sure exactly what they are.

Upvotes: 1

Related Questions