Как сделать чтобы padding не влиял на размер блока
Перейти к содержимому

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

  • автор:

Изменение padding DIV без влияния на размеры в CSS

Если вы не хотите, чтобы внутренние отступы влияли на общие размеры вашего DIV, воспользуйтесь свойством box-sizing: border-box; . Это свойство позволяет учитывать толщину рамки и внутренние отступы при расчете общих размеров элемента:

Скопировать код

.my-special-div < box-sizing: border-box; /* Избавляемся от проблем с внутренними отступами! */ width: 300px; /* Ширина остаётся неизменной */ height: 200px; /* Высота сохраняется */ padding: 20px; /* Внутренние отступы теперь включены в общий размер! */ >

Теперь div по-прежнему имеет размеры 300x200px снаружи, однако пространство внутри автоматически корректируется, учитывая внутренние отступы.

Разбор свойства box-sizing

Свойство box-sizing: border-box; указывает браузеру рассчитывать ширину и высоту элемента, включая рамку и внутренние отступы. Размеры div остаются стабильными, и внутренние отступы не вносят изменения в размер содержимого.

Поддержка в старых браузерах

Большинство современных браузеров прекрасно поддерживают box-sizing . Однако для некоторых устаревших версий браузеров могут потребоваться вендорные префиксы:

Скопировать код

.my-special-div < -moz-box-sizing: border-box; /* Для Firefox */ -webkit-box-sizing: border-box; /* Для Safari и Chrome */ box-sizing: border-box; /* Для всех остальных */ >

Альтернативный подход: двойные div

В некоторых случаях можно обойтись без изменения box-sizing , создав пару вложенных div:

Скопировать код

 
/* Внутренняя зона комфорта с отступами */ Ваш контент здесь.

Важно, чтобы у .inner-div не было указано фиксированной ширины, тогда отступы займут всё доступное пространство, дополнив функционал border-box .

Подробности и лучшие практики

Адаптивный дизайн

В адаптивном дизайне каждый пиксель имеет значение. С border-box размеры элемента становятся независимыми от изменений внутренних отступов, что упрощает процесс разработки.

Удобство для динамического контента

Если div предусматривает динамически меняющийся контент, использование border-box обеспечивает возможность менять внутренние отступы без непредвиденных последствий для размеров элемента.

Ситуации, в которых border-box не универсален

  • Сетки: при работе с CSS-сетками имеет смысл применять другой подход к border-box , поскольку это свойство может привести к непредсказуемым результатам.
  • Flexbox: border-box может влиять на ведение свойств flex-grow и flex-shrink в flex-контейнерах, поэтому тщательно тестируйте ваши макеты.

Визуализация

Можно визуализировать изменение внутренних отступов в DIV как процесс корректировки рамки картины.

До: ��️ [ ] ‘Картина’ идеально подходит к размерам ‘рамы’ (DIV).

�� При изменении внутренних отступов размер ‘картины’ (DIV) сохраняется, меняется лишь ‘рама’:

После: ��️ [ ] Теперь ‘рамка’ откорректирована, ‘картина’ осталась прежней.

Применение box-sizing: border-box схоже с указанием раме: «Вписывайся в первоначальные размеры».

Свойство box-sizing

Свойство box-sizing может принимать одно из двух значений – border-box или content-box . В зависимости от выбранного значения браузер по-разному трактует значение свойств width/height .

Значения box-sizing

content-box Это значение по умолчанию. В этом случае свойства width/height обозначают то, что находится внутри padding . border-box Значения width/height задают высоту/ширину всего элемента.

Для большей наглядности посмотрим на картинку этого div в зависимости от box-sizing :

/*+ no-beautify */ div

В верхнем случае браузер нарисовал весь элемент размером в width x height , в нижнем – интерпретировал width/height как размеры внутренней области.

Исторически сложилось так, что по умолчанию принят content-box , а border-box некоторые браузеры используют если не указан DOCTYPE , в режиме совместимости.

Но есть как минимум один случай, когда явное указание border-box может быть полезно: растягивание элемента до ширины родителя.

Пример: подстроить ширину к родителю

Задача: подогнать элемент по ширине внешнего элемента, чтобы он заполнял всё его пространство. Без привязки к конкретному размеру элемента в пикселях.

Например, мы хотим, чтобы элементы формы ниже были одинакового размера:

  

Как сделать, чтобы элементы растянулись чётко по ширине FORM ? Попробуйте добиться этого самостоятельно, перед тем как читать дальше.

Попытка width:100%

Первое, что приходит в голову – поставить всем элементам INPUT ширину width: 100% .

 form < width: 200px; border: 2px solid green; >form input, form select 

Как видно, не получается. Элементы вылезают за пределы родителя.

Причина – ширина элемента 100% по умолчанию относится к внутренней области, не включающей padding и border . То есть, внутренняя область растягивается до 100% родителя, и к ней снаружи прибавляются padding/border , которые и вылезают.

Есть два решения этой проблемы.

Решение: дополнительный элемент

Можно убрать padding/border у элементов INPUT/SELECT и завернуть каждый из них в дополнительный DIV , который будет обеспечивать дизайн:

 form < width: 200px; border: 2px solid green; >/* убрать padding/border */ form input, form select < padding: 0; border: 0; width: 100%; >/* внешний div даст дизайн */ form div 

В принципе, это работает. Но нужны дополнительные элементы. А если мы делаем дерево или большую редактируемую таблицу, да и вообще – любой интерфейс, где элементов и так много, то лишние нам точно не нужны.

Кроме того, такое решение заставляет пожертвовать встроенным в браузер дизайном элементов INPUT/SELECT .

Решение: box-sizing

Существует другой способ, гораздо более естественный, чем предыдущий.

При помощи box-sizing: border-box мы можем сказать браузеру, что ширина, которую мы ставим, относится к элементу полностью, включая border и padding :

 form < width: 200px; border: 2px solid green; >form input, form select 

Мы сохранили «родную» рамку вокруг INPUT/SELECT и не добавили лишних элементов. Всё замечательно.

Свойство box-sizing поддерживается в IE начиная с версии 8.

Отмена изменения размеров div с помощью padding в CSS

Для предотвращения изменений ширины и высоты элемента при добавлении внутренних отступов или padding, следует использовать box-sizing: border-box; :

Скопировать код

.element

С применением свойства box-sizing: border-box; параметры ширины и высоты останутся неизменными и составят 100px, независимо от размера внутренних отступов.

Разбираемся со свойством box-sizing

Свойство box-sizing определяет, каким образом рассчитываются размеры элементов в CSS. По умолчанию оно установлено как content-box и точно игнорирует padding и рамку при определении размера элемента. Применение border-box заставляет браузер учитывать padding и рамку при расчете общей ширины и высоты.

Существуют ли альтернативы? Конечно!

Встречайте отступы

Хотите добавить пространство вокруг элемента? Воспользуйтесь margin . Это свойство создаст отступы, не затрагивая внутренние размеры элемента.

Сдвиг текста для оформления содержимого

Нужен сдвиг текста внутри div , но не хотите менять ширину? Рассмотрите свойство text-indent , которое позволяет сдвинуть текст, сохранив при этом размеры div .

Гибкое оформление с помощью вложенных div

Для создания умных макетов можно использовать вложенные divs : задайте width: auto; и margin-left или margin-right . Таким образом, вы сможете эмулировать padding без воздействия на ширину элемента.

Визуализация

Продемонстрируем CSS Box Model с применением и без использования box-sizing: border-box; :

Вот ваш «бокс» в CSS — мы символически прозвали его картинной рамой:

Почему блок при применении `padding` увеличивает свои размеры?

изображение

В заглавии блоки multi-accordion-title и находящийся в нём catalog-title почему-то увеличивают с размер, когда применяется padding хотя их родительский блок шириной 240px. Как это исправить?

$('.multi-accordion li > a').next().parent().addClass('has-children') $('.multi-accordion .has-children > a').click(function(e) < var li = $(this).parent(); li.parent('ul').find('.open').add(li).toggleClass('has-children open').children('ul'); e.preventDefault(); >);
.body < >.col-left-first < display: block; position: relative; width: 240px; margin-left: 240px; box-sizing: border-box; >.multi-accordion-catalog < display: block; position: relative; width: 100%; >.multi-accordion < line-height: 40px; margin: 0; color: #646464; padding: 0; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: normal; font-size: 16px; text-transform: none; >.multi-accordion ul < display: none; list-style: none; padding: 0px; >.multi-accordion li < list-style: none; >.multi-accordion > li > a < >.multi-accordion > li > ul < padding-left: 8px; >.multi-accordion > li > ul > li > ul < padding-left: 8px; >.multi-accordion a, .multi-accordion a:link, .multi-accordion a:visited < display: block; text-decoration: none; padding: 0 24px 0 10px; color: #646464; position: relative; >.multi-accordion a:hover < >.multi-accordion > a:only-child:link, .multi-accordion > a:only-child:visited < color: blue; >.multi-accordion > a:only-child:hover < text-decoration: underline; background: transparent; >.multi-accordion-title < display: inline-block; position: relative; width: 100%; padding-right: 40px; margin-bottom: 12px; >.multi-accordion-title:after < content: ''; position: absolute; width: 0; height: 0; border-style: solid; top: 100%; left: -12px; border-width: 0 12px 12px 0; border-color: transparent #cccccc transparent transparent; >.catalog-title < display: inline-block; position: relative; height: 40px; width: 100%; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 600; font-size: 16px; text-transform: uppercase; background-color: #e1e1e1; padding: 9px 0 0 10px; box-shadow: -4px 4px 4px rgba(0, 0, 0, 0.2); >.catalog-title:before < content: ''; position: absolute; top: 0; left: -12px; height: 100%; width: 12px; background-color: #e1e1e1; >.catalog-title:after < content: ''; position: absolute; top: 0; left: 100%; border-style: solid; border-width: 0 0 40px 40px; border-color: transparent transparent transparent #e1e1e1; >.has-children, .open < position: relative; >.has-children > a:before , .open > a:before < content: ''; position: absolute; height: 24px; width: 24px; top: 8px; right: 4px; >.has-children > a:before < background: url(https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-16.png) no-repeat; >.open > a:before < background: url(https://cdn1.iconfinder.com/data/icons/mayssam/512/Top_2-16.png) no-repeat; >.multi-accordion .open > ul

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *