Почему дочерний DIV не видит padding-right родителя?

Question

[Дмитрий Булатов]

Почему дочерний DIV, при 100% ширине, не реагирует на наличие padding-right родительского DIV? Он же должен видеть отступ.
Прошу не ужасаться качеству кода. В этом и суть - пишет нуб. И плиз, воздержитесь от "иди учись" и "учи матчасть".

<div id="conductor">
		 <div id="contentheader"></div>
		<div id="conductorcontent"></div>
<div>

#conductor{
position: relative;
float: left;
margin-top: 5%;
left: 25%;
min-width: 900px;
height: 700px;
box-shadow: 0 3px 3px #FDFDFD inset;
border-top: 1px solid #000000;
background: rgba(190, 190, 190, 0.7);
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 8px;
}
  
#contentheader{
float: left;
margin-top: 0px;
margin-right: 8px;
width: 100%;
height: 40px;
border: 5px solid #000000;
}

Answer 1

[YavaDev]

Почитайте здесь для понимания - https://developer.mozilla.org/ru/docs/Web/CSS/box-...

Ну, а после пропишите:

* {
  box-sizing: border-box;
}

Comments

[Дмитрий Булатов]

Спасибо. Помогло.

Answer 2

[Денис Инешин]

Потому что `width: 100%;` берет полную ширину родителя. Уберите это значение и див автоматом растянется только на доступную область, с учетом паддингов.

Comments

[Сергей delphinpro]

На самом деле проблема в блочной модели, которая по умолчанию для элементов применяется как content-box. В этой модели при указании размеров, они задаются для области содержимого, исключая внутренние отступы и рамки.
Соответственно модель
padding-box — задает размер с учетов внутренних отступов,
а border-box — с учетов внутренних отступов и рамок.
Блочная модель меняется свойством box-sizing.

Answer 3

[Павел Клочков]

По идее если ширина дочернего элемента 100%, это значит вся ширина родителя + по 5 пикселя на "обрешетку". Вот эта обрешетка и мешает вам сделать красоту
Попробуйте для "дочки" задать width: calc(100% - 10px);

Comments

[Сергей delphinpro]

формулировка так себе =)
но суть верная, и решение в принципе годное.

Answer 4

[Bully Hopkins]

Думаю проблема тут в использовании float, я бы не советовал вам использовать их в 2021 году, и забыть про это свойство как про страшный сон, и тогда проблема решиться сама собой :)

Comments

[Павел Клочков]

мне кажется float в данном варианте вообще никакой роли не играет. Он здесь по принципу: спросят, скажем есть. Но если его убрать проблема не решится

[Bully Hopkins]

Возможно я просто не совсем правильно понял суть вопроса, но дело как раз во float, я более чем уверен.
Вот пример без float. Видно что блок с шириной 100% учитывает внутренние отступы родителей, подобная ситуация может всплыть только когда элемент был вырван из общего потока, что как раз и делает float. По подобной логике работает и все значения position, кроме static. https://jsfiddle.net/wpm0j5qr/3/

[Павел Клочков]

Я готов с вами согласиться в том что float большое зло ибо он приносит только временное облегчение, а томом вылезает большим геморроем, но в данном случае он не виноват. Поставьте в своём примере:

.parent {
  padding: 10px 10px 10px 10px;
  border: 1px solid #000;
}

.child {
  background: blue;
  width: 100%;
  color: #fff;
  border: 5px solid #000;
}

И у вас появится та же беда что и у автора вопроса.
На мой взгляд всё же проблема в ширине border.