CSS：100％宽度和边距

Question

Please see example at

http://jsfiddle.net/cne94hw4/

.a{
      width: 100%;
    background-color: #eee;
    margin-left: 200px;
}

I was expecting "width 100%" will mean 100% of the windows, but clearly it's not when I add a margin to it. I found this is difficult to understand.

What's the exact relationship of the box and the margin? It's there any written rule for this?

Answer 1

Your question is about the CSS Box model, which is described in detail at the CSS specification: http://www.w3.org/TR/CSS2/box.html

In brief, the width defines the width of the content box. If you add padding, borders and margins, then the overall width of the block box is the width of the content box plus any widths due to padding, borders and margins.

As for the height , padding and border widths are added to the overall heigth of the block. Margins, though, can collapse with the margins of adjacent blocks, which is another topic to look at (see: collapsing margins ).

Another concept is the block formatting context , which comes into play if you deal with elements that may be floated or positioned.

In your example, the overall width of the a element is 100% plus 200px due to the left margin.

Finally, you can have some control over how the width is computed by using the box-sizing property.

Answer 2

width: 100%' does mean 100%` of the document your example, but you also set a margin, which is what's limiting the width of the element. See what happens when you remove it.

Answer 3

try the following

.class{  
   width:100%;
   padding-left:200px;
   box-sizing:border-box;
}

margin adds extra space out of the box.