Почему нет правого маргина у красного блока, хотя в блочной модели написано, что правый маргин 10 пикселей?

302

26 января 2017, 03:27

Привет.

Вопрос по CSS. Написал разметку:

* { 
  margin: 0px; 
  padding: 0px; 
} 
 
#one { 
  width: 100%; 
  height: 100px; 
  margin: 10px; 
  background-color: red; 
} 
 
#two { 
  width: 1500px; 
  height: 100px; 
  background-color: green; 
}

<div id="one"></div> 
<div id="two"></div>

Если это дело открыть в девтулс, то видно это:

Не понимаю, почему нет правого margin у красного блока, хотя в блочной модели написано, что margin-right: 10px?

Почему нижний и верхний margin короткие? Видно, что они не доходят до правого края красного блока.

В моем примере красный блок вылез за пределы боди и не был обрезан, так как я не задавал overflow:hidden

Answer 1

Вот ваш код для наглядности:

body { 
  margin: 0px; 
  padding: 0px; 
} 
 
#one { 
  width: 50%; 
  height: 100px; 
  margin: 10px; 
  background-color: red; 
   
  float: left 
} 
 
#one_plus { 
  width: 20px; 
  height: 100px; 
  background-color: black; 
   
  float: left 
} 
 
#two { 
  width: 100%; 
  height: 100px; 
  background-color: green; 
   
  float: left 
}

<div id="one"></div> 
<div id="one_plus"></div> 
<div id="two"></div>

Как видите, там есть отступ. Но, когда вы делаете ширину у первого блока 100%, он использует ширину родительского окна и смещается вправо из-за margin-left. Этот блок выходит за пределы родительского блока. Естественно, при этом не будет видно отступ справа.

Так ведут себя блоки в вашем примере:

Answer 2

Потому что установлена ширина 100%. Блочный элемент по умолчанию и так 100%. У вас 100% рассчитывается из размера родителя, а это вся ширина body.

Уберите у #one 100%, ну и html с body незачем.

И еще лучше не использовать обнуление стилей браузера подобным методом.

Почитайте тут: https://habrahabr.ru/post/45296/