Текст увеличивает пространство в полях, поэтому, если вы хотите, чтобы текст не влиял на размер, вы должны добавить 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>