Why is margin part of the box model if it is outside of the box?
Answer
It is mainly part of it for two reasons, the first one is the easiest to take in:
the world wide web consortium (W3C), which is an international community in charge to develop and set the standards for best web programming practices, have decided that the most efficient way to manipulate elements is using the box model as we know it, where --and this is the second reason – margin is a property set on the element and it directly affects it in relation to what surrounds it.
I am a newbie to the whole topic, so I probably got this wrong, but could you also say that “margins” are part of the box model because they define the space between the various boxes and so define the way we can position boxes on the page? That is, they tell the browser if another box can go to the left (right, the top or bottom) of the box for which margin is defined and what shape these boxes need to be to fit there.
Or did I get that wrong?
(And sorry for the verbosity: looks like I definitely need to work on that, considering I am learning to code and program to better my chances of becoming a technical writer…;))
The original spec did not include any of the additional working tools that came with CSS3 so the box model was very literal.
margin -> border -> padding -> content
The content box included everything but margin for the purpose of calculating vertical and horizontal size. Things are different these days now that we have box-sizing.
Thanks for the history lesson: it clarified matters further and showed that I grasped the right concept. Still, I made a mess of phrasing it, which illustrates my newbie uncertaintly.
This brought me back to biology class, when we studied cell structures. If one can recall the relation between the cell membrane and the cell wall - then the same applies here where the wall interacts with the ‘outside’ (of the cel) defining the ultimate shape; while the membrane is ‘inside’, also providing definition to the elements within it.
From what I understand it, the margin is what the browser interprets as the area of the box itself. While users may not be able to see it, the web browsers think that the margin is the real area of the box. Does that help?
Hi, I’m experimenting with units (px and %) to see how margin is affected. When I try with % what does it exactly mean? is it relative to what? Thanks for your answers.
The box-sizing property specifies how the width and height of an element are calculated. The most common value assigned to this property is border-box. This value specifies that the borders and padding of an element should not take any more space than the element’s width and height properties specify. The border and padding will be added to the inside of an element rather than the outside
When assigning a value determined by the % unit to a property, it will be calculated relative to its parent element. This means that if we add 50% margin to an element nested inside the <body> element, the browser will calculate 50% of the <body> element’s width, and assign it to the margin property of the element
What are the rules for boxes overlapping each other?
Also consider a specific case of centering a text element inside, say a colored canvas of some width and height, how would one achieve that. A perfect center?
By default, the box-sizing property is set to content-box. This means, that if we set our element to have a height of 100px, and a width of 100px, it won’t necessarily be 100px x 100px. If, let’s say, we add 10px of padding on each side of our element, the element will now be 120px x 120px. However, when setting the box-sizing property to border-box, if we set our element’s height and width to 100px, it will be 100px x 100px no matter what. So even if we add 10px of padding on each side, the padding will now be part of these 100px
but i dont understand how if we add 10 px of padding on each side the width and height stay the same. where does that padding go? if the height and width stay the same then whats the point of adding 10px of padding? will it even show?
I have a question it seems that i understand a bit , but how do we know that the margin was resize? because it is invisible, is there any method that we could see it ? like trying to add colors of the margin to check the difference between the padding and margin.
It is important to understand that even though the margin seems to be outside the box. It is not. The margin can be considered as the walls of the box.
Depending on the picture we decide the frame to be used to be hanged on the wall. The same can be considered for the margin.
If you have background-color set for body, and you have background-color set for the content box; you’ll see the difference. Also, as long as you have content within and out, you should see the spacing too. Hope this helps…
