The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Some issues about relation between width/height and margin/padding/border Reply To: Some issues about relation between width/height and margin/padding/border


This is the thing I disagree with. Margins should not be included in an element’s measurements. This would make it significantly more difficult to build layouts. For example, in order to get consistent effective margins, you would have to know and adjust the margins of all adjacent elements. “margin collapse” exists for a reason.

Comparing to troubles you have now, what you mentioned is almost nothing. To consistent margins without margin collapses, you can just set the margin the same for all the elements (maybe except for those on the edges of the page). For example, here is a page: Now try to add some padding/border/margins of different sizes to some or all those elements. Every time you add or change a padding/border/margin, you’ll have to change the width/height to preserve the overall layout. If padding/border/margin were included in width/height, you wouldn’t have such troubles.

Are you having a specific issue? or do you have an example of a layout which suffers from these problems? Perhaps we could help out with a concrete example.

Okay here is an example:

I want the elements to always cover the whole page horizontally and show no scrollbar when you resize the window. And I want the middle three panels have the exact percentage width. That is, the two blue panels have 25% of the window’s width each and the middle orange panel has 50% of the window’s width. Now try to add some margins to the elements. After margins are added, those three middle panels should still have the same percentage settings (including their margins). And I want the margins kept separate.

Here I want to see 1. if you can achieve it; 2. how much effort you need to achieve it if you do; 3. how much simpler/easier if the width/height included margin (and border/padding). Obviously for 3, it’d be very straight forward to add margin/border/padding should width/height include margin/border/padding.