"Изменение размера padding" - как вы наверное знаете, что при добавлении в блок свойств "padding" - размеры блока меняются на величину "padding". Как отключить изменение размеров при добавлении padding.
Подробно об отключении изменения размеров при добавлении padding.
- Как отключить изменение ширины/высоты при добавлении padding
- Когда происходит изменение ширины/высоты при добавлении padding
- Решено! Отключено изменение ширины/высоты при добавлении padding
Как отключить изменение ширины/высоты при добавлении padding
Для того, чтобы решить нашу задачку - нам потребуются примеры блоков, чтобы это увидеть как просиходит в реальности!
Первый блок - стандартный без padding
Нам понадобится... пусть это будет div.
Нам понадобится class
Добавим немного стилей нашему классу:
<style>
.example {
border: 1px solid red;
width: 100%;
height: 50px;
}
</style>
Как видим... все замечательно, наш див вписался в родительски блок и не выходит за его пределы!
Перейдем ко второму примеру, когда ширина блока изменится под влиянием padding
Когда происходит изменение ширины/высоты при добавлении padding
Второй пример блока с измененными размерами под влиянием padding!
Для того, чтобы показать изменение размеров блока из-за padding нам потребуется опять - div.
В class-е добавим padding
<style>
.example_1 {
border: 1px solid red;
width: 100%;
height: 50px;
padding: 30px;
}
</style>
Выведем разобранный пример прямо здесь
И добавим первый блок для сравнения:
Как видим... довольно неприятное изменение высоты и ширины блок под влиянием "padding"!
Далее переходим к решению...!
Решено! Отключено изменение ширины/высоты при добавлении padding
На самом деле - всё просто!
Для того, чтобы отключить "изменение ширины/высоты при добавлении padding" - нам потребуется всего одна строка!
Повторяем все под копирку, что было в предыдущем пункте...
В стилях добавляем волшебную строку:
И изменим цвет бордюра... чтобы блок отличался от предыдущих...
<style>
.example_2 {
border: 1px solid blue;
padding: 30px;
width: 100%;
height: 50px;
box-sizing: border-box;
}
</style>
Первый блок для сравнения:
Второй:
И решенная проблема "изменения размеров из-за" padding
Если вы применяли padding для того, чтобы ваш текст был обернут пустым пространством на размер "padding", то здесь мы видим, что нижний и правый padding убит..., но это уже совсем другая история(как говорит Каневский, я ненавижу его за это! 
смайлы)
