Стилизация с отступом в HTML-файл

Question

Я создал простой файл CSS и HTML следующим образом.

.main {
  width: 1000px;
  height: 500px;
  background: blue;
  color: black;
  font-size: 16px;
  padding: 20px;
}

.great-grand-parent {
  width: 900px;
  height: 400px;
  background: orange;
  color: black;
  font-size: 16px;
  padding: 20px;
}

.grand-parent {
  width: 800px;
  height: 300px;
  background: red;
  color: black;
  font-size: 16px;
  padding: 20px;
}

.parent {
  width: 700px;
  height: 200px;
  background: white;
  color: black;
  font-size: 16px;
  padding: 20px;
}

.child {
  width: 600px;
  height: 100px;
  background: cyan;
  color: black;
  font-size: 16px;
  padding: 20px;
  /*box-sizing: border-box;*/
}

<div class="main">Main
  <div class="great-grand-parent">Great Grand Parent
    <div class="grand-parent">Grand Parent
      <div class="parent">Parent
        <div class="child">Child
        </div>
      </div>
    </div>
  </div>
</div>

Ожидаемый результат: Деление с различными цветами с равным отступом с четырех сторон.

Фактический результат: Деление с различными цветами с различными отступами с четырех сторон.

Вопрос: Что я могу изменить, чтобы получить ожидаемый результат?

Answer 1

Текст увеличивает пространство в полях, поэтому, если вы хотите, чтобы текст не влиял на размер, вы должны добавить position: absolute.Кроме того, используйте width: 100%, только если вы хотите, чтобы размер соответствовал всей ширине вашего окна или экрана.Если вам не нужна определенная высота, не добавляйте ее в свой код, поскольку основное окно будет адаптироваться к высоте его содержимого.В качестве глобальных стилей используйте box-sizing: border-box.Вот пример:

* {
  box-sizing: border-box;
}

div {
  position: relative;
}

span {
  position: absolute;
  top: 0;
  left: 0;
}

.main {
  width: 100%;
  background: blue;
  color: black;
  font-size: 16px;
  padding: 20px;
}

.great-grand-parent {
  width: 100%;
  background: orange;
  color: black;
  font-size: 16px;
  padding: 20px;
}

.grand-parent {
  width: 100%;
  background: red;
  color: black;
  font-size: 16px;
  padding: 20px;
}

.parent {
  width: 100%;
  background: white;
  color: black;
  font-size: 16px;
  padding: 20px;
}

.child {
  width: 100%;
  background: cyan;
  color: black;
  font-size: 16px;
  padding: 20px;
  /*box-sizing: border-box;*/
}

<div class="main"><span>Main</span>
  <div class="great-grand-parent"><span>Great Grand Parent</span>
    <div class="grand-parent"><span>Grand Parent</span>
      <div class="parent"><span>Parent</span>
        <div class="child"><span>Child</span></div>
      </div>
    </div>
  </div>
</div>

Answer 2

это из-за содержимого внутри DIV, высоты и ширины.

.main {
  background: blue;
  color: black;
  font-size: 16px;
  padding: 20px;
  margin: 0 auto;
}

.great-grand-parent {
  background: orange;
  color: black;
  font-size: 16px;
  padding: 20px;
  margin: 0 auto;
}

.grand-parent {
  background: red;
  color: black;
  font-size: 16px;
  padding: 20px;
  margin: 0 auto;
}

.parent {
  background: white;
  color: black;
  font-size: 16px;
  padding: 20px;
  margin: 0 auto;
}

.child {
  background: cyan;
  color: black;
  font-size: 16px;
  padding: 20px;
  /*box-sizing: border-box;*/
  margin: 0 auto;
}

<div class="main">
  <div class="great-grand-parent">
    <div class="grand-parent">
      <div class="parent">
        <div class="child">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

https://www.w3schools.com/css/css_boxmodel.asp

Посмотрите эту ссылку.Заполнение одинаково на всех коробках, и они работают.Но ... поля, границы и отступы - это области без содержания.Затем у вас есть область содержимого внутри, где вы пишете свой текст и рисуете следующее «внутреннее» поле.Поэтому, если вы удалите текст, поля будут выглядеть одинаково.В противном случае удалите верхние отступы и установите высоту строки: 20 пикселей, и они будут выглядеть одинаково.

Чтобы удалить верхний отступ, вы можете объявить заполнение: 0 20px 20px.

Answer 4

Padding такой же, но из-за содержания текста выглядит так

.main {

background: blue;
color: black;
font-size: 16px;
padding: 20px;  
}

.great-grand-parent {  
    background: orange;
    color: black;
    font-size: 16px;
    padding: 20px;  
}

.grand-parent {
   
    background: red;
    color: black;
    font-size: 16px;
    padding: 20px;  
}
.parent {
    
    background: white;
    color: black;
    font-size: 16px;
    padding: 20px;  
}
.child {
  
    background: cyan;
    color: black;
    font-size: 16px;
    padding: 20px ;
    /*box-sizing: border-box;*/
}

<div title="main" class="main">
    <div title="great- grand-parent" class="great-grand-parent">
        <div title="grand-parent" class="grand-parent">
            <div title="parent" class="parent"> 
                <div title="Child" class="child"> 
                </div>
            </div>
        </div>
    </div>
</div>