Как сделать чтобы padding не влиял на размер блока
Добавил пользователь Skiper Обновлено: 18.09.2024
Свойство padding в CSS определяет внутренние границы блока, создавая пространство между границами блока и его содержимым.
С его помощью в html-разметке можно, например, создать поля вокруг текста или увеличить площадь кнопки. Его значение соответствует ширине пустого поля между границей блока (при наличии ненулевой толщины отсчет ведется от внутренней стороны) и его содержимым, что улучшает восприятие, а также может приводить к увеличению размера самого элемента.
На примере ниже сделано следующее: есть блок div с желтым фоном и в нем содержимое в виде текста на зеленом фоне. К блоку применены отступы по всем сторонам padding: 20px 30px .
Значения свойства padding
Для задания ширины полей внутри элемента индивидуально для каждой стороны существуют четыре отдельных инструкции. Это такие:
- padding-right – устанавливает отступ от правой границы блока;
- padding-left – слева;
- padding-top – сверху;
- padding-bottom – снизу.
По умолчанию пространство между границей и содержимым элемента отсутствует, то есть padding =0. При этом значение auto для этого свойство является некорректным.
Значение padding в CSS может записываться с помощью нескольких чисел – от 1 до 4.
| Количество значений | Результат |
|---|---|
| 1 | Все отступы одинаковы и равны указанному числу |
| 2 | Первое число определяет вертикальные отступы (сверху и снизу), второе – горизонтальные. |
| 3 | Первое – верхний отступ, второе – правый и левый, третье – нижний. |
| 4 | Все отступы различные |
Таким образом получается, что следующие три записи приведут к одному и тому же результату:
НА ЗАМЕТКУ. Для запоминания очередности присвоения надо представить часовую стрелку. Задание значений полям начинается с 12 часов и проходит круг по направлению ее движения, то есть первое значение устанавливается для верхнего поля, второе – справа и т.д.
Значение свойства можно задавать с помощью нескольких единиц измерения:
- единицами, используемыми в CSS – px, em и т.п.;
- % – процентами от ширины элемента;
- inherit – наследования значений родительского элемента.
Padding и блочная модель
Использование этого свойства может привести к неожиданным результатам. Если вы создали элемент и указали у него ширину 200px и кроме того указали padding: 20px, то размер этого элемента неожиданно окажется 240px, то есть к установленной ширине добавятся размеры отступов. Чтобы сохранить первоначальный размер блока необходимо применить к нему свойство box-sizing: border-box .
На примере демонстрируется два элемента с установленной одинаковой шириной и отступами, но ко второму применено border-box , и его размеры не увеличиваются в зависимости от отступов.
Меня, как у верстальщика, всегда серьезно напрягал тот момент, что толщина рамки в CSS учитывается при формировании ширины блока. Я согласен, что так оно правильнее, но в некоторых случаях, это просто вопиющая несправедливость, которая влечет за собой много дополнительных проблем.
Это тоже самое, что покупать китайскую подделку швейцарских часов. Вроде выглядит все точно также, но сам то ты понимаешь, что это подделка.
Совсем чуть-чуть теории
В стандарте CSS заложено, что конечная ширина блока формируется из размера padding-отступа, ширины рамки (если у рамки по горизонтали 2 края, то этот размер нужно еще умножать на 2) и ширины текста. То значение width, которое все указывают блоку div и являлось шириной текста. Многие думают, что это ширина блока, но это не так. Именно так думал и я.
В CSS есть инструмент, который позволяет обойти такое положение вещей и позволяет css-параметром width задавать ширину блока без учета отступов и бордеров.
Решение задачи
Параметры -moz-box-sizing и -webkit-box-sizing необходимы для того, чтобы старые версии брузеров Firefox и Safari понимали, что включать ширину рамки и размеры отступов в этом случае не нужно.
Каждый специалист должен ежедневно искать новую информацию в своей области деятельности. Ведь не даром говорят, что жизнь – это движение только вперед. Если вы прожили день и ничего нового из него не вынесли, то будьте уверены, что прожили этот день зря!
Комментарии
Нашел эту статью т.к. столкнулся с проблемой, когда в середине блока расположено ещё два одинаковых по ширине блока (левый 50% и правый 50%) и у левого есть рамка справа в 1px. При этом, правый блок съезжает вниз под левый блок. В общем, добавил левому блоку:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
Чтобы получать уведомления о всех исторических IT-событиях -
Если Вы используете материал моего блога, то будьте добры поставьте ссылку.
Фиксированная высота и absolute для текстовых блоков
При увеличении количества текста он вывалится наружу и может наложиться на нижележащие элементы.
Можно отредактировать исходный HTML, а можно выполнить в консоли браузера такую команду:
После этого вы сможете отредактировать любой текст на странице.
Решение зависит от того, что нужно сделать. Если у блока по макету есть минимальная высота, но контента недостаточно, чтобы его растянуть, используйте min-height :
min-height позволит добиться соответствия макету, а при добавлении контента блок просто вырастет вниз.
Ещё это может быть полезно как временное решение, чтобы разложить блоки по макету, до того, как будет стилизовано содержимое, после этого min-height убирается.
Если же контента достаточно, min-height не нужен, достаточно задать стили для текста и padding для блока, и его размеры будут определяться содержимым.
Если у блока есть явные границы, padding нужно задавать со всех сторон, чтобы при добавлении текста он не упёрся в края:
Заказать Подопытная кнопка с минимальной шириной и высотой
Заказать слона Не хватает паддингов слева и справа Заказать слона Не хватает вертикальных паддингов Заказать слона Все паддинги на месте, добавление текста ничего не ломает
При абсолютном позиционировании блок не влияет на размеры родителя. При увеличении количества текста он не сможет растянуть родительский блок и вывалится наружу.
Как и в предыдущем случае, можно отредактировать исходный HTML или использовать команду в консоли:
После чего добавить текст в интересующий элемент.
В этом случае лучше перенести position:absolute на картинку и добавить min-height , чтобы блок не схлопывался по высоте текста (иначе может вывалиться картинка):
В спецификации HTML представлены теги, которые являются изначально либо строчными (свойство display имеет значение inline), либо блочные (display: block). Однако с выходом стандарта CSS3 появилась возможность изменять отображение элемента на строчно-блочное (display: inline-block).
По сути строчно-блочные элементы являются чем-то средним между строчными и блочными. То есть они имеют свойства и тех, и других элементов, комбинируя их. Каким образом? - В тексте они ведут себя, как строчные элементы, т.е. занимают ровно столько места, сколько текста содержится в них (если не заданы ширина или отступы), однако при назначении свойств box-модели, интерпретируют их, как блочные элементы.
Лучше всего это можно продемонстрировать на примере. В файле ниже в двух колонках с одинаковым текстом выделены одни и те же словосочетания. Выделения находятся в элементах span с классом inline слева и inline-block справа. Для этих классов заданы общие правила:
Но в левой колонке все span имеют свойство display: inline , которое назначено для них в спецификации по умолчанию. А для span в правой колонке задан display: inline-block .
Можно заметить, что за счет внутренних отступов ( padding ) слева цветные выделения накладываются друг на друга, кое-где перекрывая текст, а это и некрасиво, и нечитабельно. Что касается внешних отступов (margin), то сверху и снизу для span в левой колонке они просто игнорируются, и только слева и справа отодвигают текст от соседнего.
В правой колонке ситуация несколько иная - здесь все элементы span визуально отделены от соседнего текста, причем margin-ы работает по всем 4-м сторонам, а padding не приводят к перекрыванию текста выше. Выделенные блоки с большим количеством текста выглядят именно как блочные элементы, а те, где текста мало вписываются в текст, но за счет margin-ов увеличивают высоту строки.
Сложно назвать оба вида форматирования красивыми, но из этого тестового упражнения можно сделать следующие выводы:
- строчным элементам с фоном не стоит задавать большие внутренние отступы ( padding ), иначе они перекрывают выше идущий текст. Максимально это должно быть 3px и при этом стоит увеличить высоту строки ( line-height ) для родительского элемента (абзаца или div-а, например);
- строчно-блочные элементы с фоном, размещенные в тексте, не должны содержать большие объемы текста, иначе они будут "вываливаться" из него наподобие цитат, или врезок. Лучше использовать этот тип отображения для элементов, которые предназначены для каких-либо оформительских целей, например, для буквиц, шрифтовых иконок, кнопок, ссылок и т.п.
Использование inline-block элементов для создания кнопок
Сделаем еще один небольшой сравнительный анализ. В примере ниже представлены ссылки, внешний вид которых с помощью css-стилей отображает их как кнопки. Но 2 из них имеют display: inline-block , одна - display: inline (по умолчанию заданный в спецификации для ссылки) и еще одна - display: block . Над каждой кнопкой подписано, каким образом она была отформатирована.
При клике на каждую из ссылок-кнопок текст, написанный на ней будет увеличен. В результате и сама кнопки либо увеличится, либо останется неизменной.
Что касается кнопок с display: inline-block и display: inline , у которых размер был сформирован padding-ами, то при добавлении текста они просто расширяются. Оранжевая кнопка Sale, у которой размер имеет фиксированную ширину и высоту, увеличивается за счет добавленного текста вниз, хотя ни фон, ни рамка на этот текст не распространяются. Кнопка-ссылка с display: block изначально занимает всю ширину родительского элемента, поэтому добавление текста не влияет на ее размер на больших экранах. А вот на маленьких в ней текст за счет фиксированной высоты тоже выходит за пределы фона вниз. Еще можно заметить, что для желтой кнопки с display: inline несколько иначе определяются отступы от заголовка сверху - она расположена чуть выше всех остальных кнопок, хотя margin ни для одной из них в свойствах задан не был. Форматирование кнопок определялось такими свойствами:
Если содержимое в блоке может измениться, вместо жестких размеров блока задавайте внутренние отступы. Расскажу, как сделать так, чтобы:
- правка дополнительного содержимого не затрагивала ранее написанные стили;
- при добавлении нового содержимого макет отображался корректно.
Кнопки
Создадим кнопку общего назначения:
/* отступы между кнопками */
/* центрируем текст кнопки по вертикали */
/* центрируем текст кнопки по горизонтали */
/* чтобы работала геометрия и отступы у тега */
/* убираем обводку у тега */
.jpg)
Жесткие размеры дают корректное отображение макета только здесь и сейчас.
Можно добавить более гибкую систему геометрии блочной модели, поставив значение min-width:
/* при жесткой высоте будет увеличиваться ширина */
/* … остальной код без изменения */
.jpg)
Мы поправили отображение, но теперь текст слишком близко к границам кнопки, поэтому нужно поставить внутренние отступы. Не забудьте вычесть их из ширины блока при box-sizing:content-box, то есть стандартном поведении элементов.
поскольку другое значение border-box не задавалось,
нужно подкорректировать размеры
/* при жесткой высоте будет увеличиваться ширина */
/* … остальной код без изменения */
.jpg)
Блоки страницы
При верстке посадочных страниц можно встретить блоки с большим количеством свободного пространства внутри. Пример:
.jpg)
Лучше всего оформить это в CSS так:
Поздравляю, вы стали обладателем квартиры в Сызрани!
/* центрируем содержимое по вертикали и горизонтали */
/* учитываем последующее добавление элементов */
Вот что у нас получилось:
.jpg)
Возможно, позже в этот блок понадобится добавить описание. При большом количестве текста с нашими жесткими размерами все пойдет наперекосяк:
.jpg)
Такое происходит при переполнении контейнера .greeting. Некоторые начинающие специалисты могут просто поставить overflow:hidden, но это не решит проблему.
Ставим min-height и отступы на случай, если содержимого станет слишком много:
/* код без изменения */
А что, если задать размеры отступов, значительно превышающие в сумме минимальную ширину или высоту?
/* тут речь идет только о box-sizing:content-box */
/* код без изменения */
Начальное поведение у элементов в обоих случаях будет одинаковым, а вот поведение при превышении минимального значения контейнера — разным.
.jpg)
А что там с margin’ами? Можно ли их подвязать на замену padding? Нет. Внешние отступы имеет смысл использовать, чтобы задать расстояния между несколькими логически законченными блоками. Не делайте так:
Поздравляю, вы стали обладателем квартиры в Сызрани!
И так тоже не делайте:
/* не задаём никакие отступы в родительском элементе */
/* код без изменения */
Резюме
- Для всего, что может измениться, задавайте минимальные и максимальные размеры.
- Добавляйте отступы для корректного отображения.
Уточните у дизайнера или клиента, какую часть свободного места можно отвести на отступы, оставив разницу на min-width/height.
Читайте также: