Как отключить изменение ширины/высоты при добавлении padding

"Изменение размера padding" - как вы наверное знаете, что при добавлении в блок свойств "padding" - размеры блока меняются на величину "padding". Как отключить изменение размеров при добавлении padding.

Подробно об отключении изменения размеров при добавлении padding.

1. Как отключить изменение ширины/высоты при добавлении padding
2. Когда происходит изменение ширины/высоты при добавлении padding
3. Решено! Отключено изменение ширины/высоты при добавлении padding

Как отключить изменение ширины/высоты при добавлении padding

Для того, чтобы решить нашу задачку - нам потребуются примеры блоков, чтобы это увидеть как просиходит в реальности!

Первый блок - стандартный без padding

Нам понадобится... пусть это будет div.

Нам понадобится class

<div class="example">пример</div>

Добавим немного стилей нашему классу:

<style>
.example {
border: 1px solid red;
width: 100%;
height: 50px;
}
</style>

Выведем для просмотра наш первый "div"

Как видим... все замечательно, наш див вписался в родительски блок и не выходит за его пределы!

пример div без padding

Перейдем ко второму примеру, когда ширина блока изменится под влиянием padding




Когда происходит изменение ширины/высоты при добавлении padding

Второй пример блока с измененными размерами под влиянием padding!

Для того, чтобы показать изменение размеров блока из-за padding нам потребуется опять - div.

<div class="example_1">пример номер 2 с добавлением padding</div>

В class-е добавим padding

<style>
.example_1 {
border: 1px solid red;
width: 100%;
height: 50px;
padding: 30px;
}
</style>

Выведем разобранный пример прямо здесь

пример номер 2 с добавлением padding

И добавим первый блок для сравнения:

пример div без padding

Как видим... довольно неприятное изменение высоты и ширины блок под влиянием "padding"!

Далее переходим к решению...!




Решено! Отключено изменение ширины/высоты при добавлении padding

На самом деле - всё просто!

Для того, чтобы отключить "изменение ширины/высоты при добавлении padding" - нам потребуется всего одна строка!

Повторяем все под копирку, что было в предыдущем пункте...

<div class="example_2 ">пример - с отключенным изменением размеров блока из-за padding</div>

В стилях добавляем волшебную строку:

box-sizing: border-box;

И изменим цвет бордюра... чтобы блок отличался от предыдущих...

<style>
.example_2 {
border: 1px solid blue;
padding: 30px;
width: 100%;
height: 50px;
box-sizing: border-box;
}
</style>

Первый блок для сравнения:

пример div без padding

Второй:

пример номер 2 с добавлением padding

И решенная проблема "изменения размеров из-за" padding

пример - с отключенным изменением размеров блока из-за padding
Единственное неудобство...

Если вы применяли padding для того, чтобы ваш текст был обернут пустым пространством на размер "padding", то здесь мы видим, что нижний и правый padding убит..., но это уже совсем другая история(как говорит Каневский, я ненавижу его за это! )