Границы внутреннего блока выходят за границы внешнего

[Омск]

Вот тут блок с желтой рамкой не должен так выходить. У блока с желтой рамкой такой код:

<p id="block">Содержимое блока</p>

#block {
padding: 10px;
margin: 5px;
width: 500px;
border-style: solid;
border-width: 2px;
border-color:#faa21a;
}

 

У блока с черной рамкой такой:

body {
border: 2px solid #111111;
padding:0;
margin: 0 auto;
width:500px;
}

 

Почему тот блок выходит за рамки? И как блочный элемент выровнять по центру?

Edited February 22, 2014 by Омск

[CroaToa]

#block {

width: 500px;

border-style: solid;

border-width: 2px;

border-color:#faa21a;

}

body {

border: 2px solid #111111;

padding:0;

margin: 0 auto;

width:500px;

[vera17]

потому что ширина блока с жёлтой рамкой = ширина+маргин+паддинг+бордер, что выходит 534 px

Что бы блочный элемент выровнять по центру margin:0 auto; и прописать ему ширину.

[iKNG]

box-sizing: border-box;-moz-box-sizing: border-box;

Это надо присвоить блоку.

[bgdn]

http://www.xiper.net/learn/css/box-model/what-is-the-box-model.html

 

Вот эту статейку почитайте и всё поймете.