EspañolDeutschFrançaisItalianoPortuguêsРусскийΕλληνικά日本語中文(简体)हिन्दी; हिंदीالعربية
Сделать основным языком
PF вопросы - Форум

Как предотвратить увеличение размера элемента HTML путем добавления заполнения

CSS программирование  
 
Как предотвратить увеличение размера элемента HTML путем добавления заполнения

Когда мы работаем с HTML и листья стиль CSS Есть времена, что поведение из элементов страницы, которую мы проектируем далеко что вы думаете, было бы правильно. В этих случаях, Мы должны погрузиться Интернет чтобы исследовать и узнать о них, чтобы дать с возможным решение Это может решить нашу проблему.

полезно, Давайте поговорим о поведение кто Элементы HTML При назначении заполнение. Предположим, что имеется элемент Div с одним Ширина и высота по умолчанию, либо в пикселях или процентах, которые дали преимущество для лучшего отображения его размеры:

Как вы можете видеть в CSS tab, Этот контейнер имеет Ширина из 75% и один Высота из 100 пикселей.

Теперь, Мы назначим заполнение из 20 пикселей с каждой стороны:

Мы видим, что, Теперь, в контейнер представляет заполнение Создание текста для разделения краев, но в дополнение, в Размер контейнера увеличился, т.е., теперь имеет ширину и высоту 40 больше пикселей из-за заполнение назначен для каждой из ее сторон.

Чтобы избежать этого, Мы будем использовать свойство Коробка калибровка контейнер, делать так Размер то же самое включить также ваш заполнение. Для этого, Мы просто присвоить значение Коробка калибровка: граница box в CSS, и мы получаем следующий результат:

Таким образом, контейнер будет держать в заполнение назначен, из 20 пикселей, без увеличения их размеры определены ранее.

Мы только что видели, также происходит с этими элементами Вход Формы, Что это, в соответствии с их желаемый дизайн, Мы должны иметь немного мастерство.

Мы собираемся Добавить элемент Вход из Введите текст для код У нас уже есть, и мы настроим Вход с одним Ширина из 100% от родительского контейнера, и заполнение из 5 пикселей для верхней и нижней сторон, и 10 пикселей для правой и левой.

Что происходит? Что наш новый элемент Вход Он выходит из размеров от родительского контейнера, даже установив ширину 100%. Как это исправить? Потому что точно так же до, как мы это делали с его контейнером, Мы собираемся назначить ему свойство Коробка калибровка со значением граница box:

Вуаля! Здесь мы видим, как Использование в Недвижимость Коробка калибровка и назначение значение граница box, Мы можем сделать это Элементы HTML Наш сайт является подходит к совершенству, в Размер, значения, которые мы назначены, во избежание что эти расти Когда назначение любой тип заполнение для них.

Присоединиться к вам к каналу Телеграмма

Оставьте нам комментарий или ввестиФорум
Share on Facebook Tweet about this on Twitter Share on Google+ Pin on Pinterest Share on Reddit Share on VK Share on StumbleUpon Share on Tumblr Share on LinkedIn Email this to someone Print this page