Сколько стоит фактическая ширина?

Question

Вопрос в этом - >> элемент html имеет эти стили шириной: 150 пикселей; padding: 3px; border: 4px; margin: 7px; Сколько стоит реальная ширина ...

Я не могу задать вопрос, потому что сказано, что ширина составляет 150 px .. так почему они спрашивают об этом?

Любые идеи?

Заранее спасибо

Answer 1

При отсутствии box-sizing декларации обивка делает ширину увеличения, как сделать границы ..

Таким образом, в вашем примере

150px внутреннее содержание ширина + 6px отступов (правый & левый 3px) plus 8px границы (справа и слева 4px) = 164px.

установка коробчатого проклейки по умолчанию content-box

содержимого коробки .Это стиль по умолчанию, как указано в стандарте CSS. Свойства ширины и высоты измеряются, включая только содержимое, но не прописку, границу или маржу. Примечание. Заполнение, граница & Поля будут находиться вне коробки, например. IF .box {width: 350px}; ТОГДА вы применяете {граница: 10px черного цвета;} {РЕЗУЛЬТАТ, вынесенное в браузере} .box {ширина: 370px;}

MDN reference

div { 
 
    width: 150px; 
 
    height: 25px; 
 
    margin: 7px; 
 
    border: 4px solid red; 
 
    padding: 3px; 
 
    background:lightblue; 
 
} 
 
.nopadding { 
 
    padding: 0; 
 
    border-color:green; 
 
} 
 
.box { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    border-color:rebeccapurple; 
 
}

<div></div> 
 

 
<div class="nopadding"></div> 
 

 
<div class="box"></div>