Глупый вопрос — по какой причине нету margin:20px; со всех сторон?

Question

[Максим]

<div></div>

*{
  margin:0; 
  padding:0;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

div{
width: 100%; /* Ширина */
height: 30px; /* Высота */
border:4px solid #000;
margin:20px;  
}

ссылка на Пациента , почему с права нету отступа ведь назначен 20px ?

Answer 1

[Александр]

DIV блочный элемент, который по факту растягивается на всю возможную ширину, а Вы ему задали еще 100%, отсюда появился и скролл. Уберите width: 100%; для div и проблема решится.

Применять конструкцию width: calc(100% - 40px) ; не логично. И почему заказчик лезет в код? Он специалист? Если нет, то это не в его компетенции. Если он верстальщик, то пусть обоснует свое решение, которое заранее не логично

Answer 2

[Алексей]

Он есть, просто ширина страницы больше экрана (появляется горизонтальный скролл), то есть 100% + 20px + 20px.

Comments

[Максим]

скролл есть - почему не видно 20px этих с права ??

[Алексей]

Действительно, не обратил внимания. Сорри.

[Максим]

Алексей: я так всегда думал что 20px + block100% + 20px = scroll

[Алексей]

stackoverflow.com/questions/17631611/100-width-min...
"With box-sizing: border-box you can manage to work around the padding, but not margin."
Либо как посоветовали - убрать width, для случая 100%.

[Максим]

Алексей: ну это конечно не то - так как бестолковому заказчику не объяснить это