Когда мы работаем с HTML и листья стиль CSS Есть времена, что поведение из элементов страницы, которую мы проектируем далеко что вы думаете, было бы правильно. В этих случаях, Мы должны погрузиться Интернет чтобы исследовать и узнать о них, чтобы дать с возможным решение Это может решить нашу проблему.
полезно, Давайте поговорим о поведение кто Элементы HTML При назначении заполнение. Предположим, что имеется элемент Div с одним Ширина и высота по умолчанию, либо в пикселях или процентах, которые дали преимущество для лучшего отображения его размеры:
Как вы можете видеть в CSS tab, Этот контейнер имеет Ширина из 75% и один Высота из 100 пикселей.
Теперь, Мы назначим заполнение из 20 пикселей с каждой стороны:
Мы видим, что, Теперь, в контейнер представляет заполнение Создание текста для разделения краев, но в дополнение, в Размер контейнера увеличился, т.е., теперь имеет ширину и высоту 40 больше пикселей из-за заполнение назначен для каждой из ее сторон.
Чтобы избежать этого, Мы будем использовать свойство Коробка калибровка контейнер, делать так Размер то же самое включить также ваш заполнение. Для этого, Мы просто присвоить значение Коробка калибровка: граница box в CSS, и мы получаем следующий результат:
Таким образом, контейнер будет держать в заполнение назначен, из 20 пикселей, без увеличения их размеры определены ранее.
Мы только что видели, также происходит с этими элементами Вход Формы, Что это, в соответствии с их желаемый дизайн, Мы должны иметь немного мастерство.
Мы собираемся Добавить элемент Вход из Введите текст для код У нас уже есть, и мы настроим Вход с одним Ширина из 100% от родительского контейнера, и заполнение из 5 пикселей для верхней и нижней сторон, и 10 пикселей для правой и левой.
Что происходит? Что наш новый элемент Вход Он выходит из размеров от родительского контейнера, даже установив ширину 100%. Как это исправить? Потому что точно так же до, как мы это делали с его контейнером, Мы собираемся назначить ему свойство Коробка калибровка со значением граница box:
Вуаля! Здесь мы видим, как Использование в Недвижимость Коробка калибровка и назначение значение граница box, Мы можем сделать это Элементы HTML Наш сайт является подходит к совершенству, в Размер, значения, которые мы назначены, во избежание что эти расти Когда назначение любой тип заполнение для них.
