CSS Margin calculation

Question

While i do understand the overall CSS box model in theory like padding, border, margin, my understanding is restricted to this individual parts.

I often gets confused how this is actually rendered by the browser. E.g. Like padding is within the border, but how is margin calculated? Is it wrt the box border or with respect to the screen? If we give both left and right margins, what takes higher precedence? If there is a width as well as left/right margins, how does the actual rendering take place like is the width of box made first,then the padding or what is it like?

What difference does a float attribute added to this box with margin make?

I think what you should do is read up on this in detail on the W3C website (I am assuming that you only care about the W3C standard). If someone answers these questions, you will have more questions, so its best if you read it yourself. w3.org/TR/CSS2/box.html — mmtauqir
– mmtauqir, Commented Aug 27, 2011 at 13:46

Madara's Ghost · Accepted Answer · 2011-08-27 13:49:19Z

4

The box consists of 4 sizes: outer to inner:

Margin - that's the space from the parent, it stacks with the parent's padding.
Border - that's the border's width, it can be specified with border: or border-width:
Padding - that's the space inside the box, if any content/elements inside that box will be spaced that from its sides.
Width - the actual box's width, may change according to content, 100%, or a fixed width as specified in width: or max-width:

An image for illustration: enter image description here

A floated element takes margin into account, so if you have

#element { margin-left: 100px; float: left; }

it will float left, but will have a 100px margin from the left side.

answered Aug 27, 2011 at 13:49

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

copenndthagen Over a year ago

You say A floated element takes margin into account...what that means exactly? Will the rendering be different if float is not speciifed..

Madara's Ghost Over a year ago

what I mean is if the elements floated and has a margin that is set, when it will be floated only to have the space that is set in the margin.

Šime Vidas · Accepted Answer · 2011-08-27 14:05:03Z

2

"E.g. Like padding is within the border, but how is margin calculated?"

Study this: http://www.w3.org/TR/css3-box/#margins

"Is it wrt the box border or with respect to the screen?"

The calculation of margins is independent from the border and the screen. The browser calculates the value for the margin separately, and then decides how it's going to be applied (rendered).

"If we give both left and right margins, what takes higher precedence?"

An algorithm is specified here: http://www.w3.org/TR/css3-box/#blockwidth

Could you give a specific example?

"If there is a width as well as left/right margins, how does the actual rendering take place like is the width of box made first,then the padding or what is it like?"

The rendering is almost instantaneous, so what counts is the end result, not the order in which the browser renders the element's properties.

"What difference does a float attribute added to this box with margin make?"

Read here: http://www.w3.org/TR/css3-box/#floating

The used values of the margins are equal to the computed values, except that the used values of any margins computed as ‘auto’ are ‘0’.

edited Aug 27, 2011 at 14:05

answered Aug 27, 2011 at 13:59

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

3 Comments

copenndthagen Over a year ago

Actually i have already gone through the box model links which u have given and find it extremely confusing and ver complicated with the example that they have given..i asked this question here, as i was looking for a simpler and basic example to understand better..

Šime Vidas Over a year ago

@test You asked a very general question ("how do margins work"), so I can only give you a general answer. Could you define a specific example (HTML code + CSS code)? Then I would be able to explain in detail...

copenndthagen Over a year ago

Well i just wanted to understand the way css margins are computed in various scenarios..like how padding is always computed wrt to the content box..similarly i wanted to understand margin calculation..

Collectives™ on Stack Overflow

CSS Margin calculation

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related