Почему ширина блока menu-block не 40, а 31.14px

Question

Почему ширина блока menu-block не 40, а 31.14px

Thermodynamix Ученик (73), на голосовании 8 месяцев назад

 .menu-block{ 
    width: 40px; 
    height: 100%; 
    border: 1px solid #000; 
    padding: 5px; 
    margin: 0; 
    box-sizing: border-box; 
} 
.menu{ 
    display: block; 
    width: 100%; 
    height: 100%; 
    border: 1px solid #000; 
}

Answer 1

mamatvoya Профи (999) 9 месяцев назад

ойойоой хс

Answer 2

V̲i̲s̲t̲a̲s̲t̲e̲r̲ Искусственный Интеллект (264147) 9 месяцев назад

пробовать без padding: 5px;

Answer 3

Dlazder Мудрец (16875) 9 месяцев назад

Смотри в девтулз

Answer 4

Ширина блока .menu-block не равна точно 40px из-за свойств padding и border. Когда вы устанавливаете свойство box-sizing в значение border-box, оно включает отступы и границу в указанную ширину. В данном случае ширина области контента уменьшается на размер суммарного отступа и границы.