Как сделать чтобы border не расширял блок

Свойство 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.

Свойство box-sizing

Свойство box-sizing позволяет менять способ расчета размеров элемента.

По умолчанию добавление padding расширяет элемент: если мы задали ширину width 100px и padding-left в 20px , то реальная ширина элемента будет 120px .

А если мы зададим еще и border-left в 10px , то реальная ширина элемента станет 130px . То есть padding и border расширяют блок (и по ширине, и по высоте). Это поведение можно поменять с помощью box-sizing .

Синтаксис

Значения

Значение	Описание
content-box	И padding , и border расширяют блок.
border-box	Ни padding , ни border не расширяют блок.

Значение по умолчанию: content-box .

Пример . Стандартное поведение

Сейчас оба блока имеют одинаковую высоту и ширину, однако у второго блока padding задан, а у первого — нет. Посмотрите, как отличаются их размеры:

#elem1 < width: 300px; height: 100px; margin-bottom: 10px; background: #f1f1f1; >#elem2 < padding: 50px; width: 300px; height: 100px; background: #f1f1f1; >

Пример . Стандартное поведение

Сейчас оба блока имеют одинаковую высоту и ширину, однако у второго блока задана граница в 10px , а у первого — нет. Посмотрите, как отличаются их размеры:

#elem1 < width: 300px; height: 100px; background: #f1f1f1; >#elem2 < border: 10px solid black; width: 300px; height: 100px; background: #f1f1f1; >

Пример . Стандартное поведение

Сейчас второй блок имеет и padding , и границу в 10px :

#elem1 < width: 300px; height: 100px; background: #f1f1f1; >#elem2 < padding: 50px; border: 20px solid black; width: 300px; height: 100px; background: #f1f1f1; >

Пример . Значение border-box

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

#elem1 < width: 300px; height: 100px; background: #f1f1f1; >#elem2 < box-sizing: border-box; padding: 50px; border: 10px solid black; width: 300px; height: 100px; background: #f1f1f1; >

Смотрите также

• свойство outline ,
  которое делает границу, не расширяющую элемент

Свойство border

Свойство border добавляет вокруг элемента рамку заданной толщины, стиля и цвета. Для создания линий на отдельных сторонах элемента используются свойства border-top, border-right, border-bottom и border-left, соответственно устанавливающие линию сверху, справа, снизу и слева. Так же эти свойства могут быть использованы и чтобы убрать линию на определённой стороне.

border: 2px solid #0069b5; /* Параметры рамки */ border-left: none; /* Убираем линию слева */ border-right: none; /* Убираем линию справа */

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

Сама рамка идёт после содержимого элемента и пустого пространства, создаваемого padding (рис. 1). Если свойство padding не задано, то рамка начинается сразу вокруг содержимого.

Рис. 1. Положение рамки в элементе

В примере 1 показано добавление линии слева от цитаты с помощью свойства border-left .

Пример 1. Использование border-left

Результат данного примера показан на рис. 2.

Рис. 3. Линия поверх фона

Поведение фона в подобных случаях можно изменить с помощью свойства background-clip. К примеру, значение padding-box будет выводить фон внутри границ, а content-box внутри содержимого. Это позволяет создавать интересной формы блоки, если задать единый цвет рамки и фона и воспользоваться свойством background-clip (пример 3).

Пример 3. Использование background-clip

Результат данного примера показан на рис. 4.

Рис. 4. Пунктирная рамка

Свойство border является частью блока и влияет на его размеры. Альтернативой border выступает свойство outline. Вот его особенности:

• outline не влияет на размеры и положение самого элемента;
• outline не занимает место, не влияет на окружающие элементы и отображается поверх них;
• для outline нельзя задать параметры линии на отдельных сторонах элемента, outline применяется сразу ко всем четырём сторонам;
• свойство border-radius, задающее радиус скругления рамки, не действует на outline ;
• outline можно расширять и сжимать с помощью outline-offset, отрицательное значение выводит рамку внутри элемента.

Свойство outline не заменяет border и вполне может существовать вместе с ним. В примере 4 показано сочетание этих свойств.

Пример 4. Использование outline

Результат данного примера показан на рис. 5.

Рис. 4. Две рамки

Автор: Влад Мержевич
Последнее изменение: 05.08.2023

Создайте блок с рамкой, как показано на рис. 1. В браузере IE вид может отличаться.

Создайте таблицу, как показано на рис. 1.

Имя	Оружие
Леонардо	Катаны
Рафаэль	Кинжалы-сай
Донателло	Шест-бо
Микеланджело	Нунчаки

Придумайте три способа создания рамки, показанной на рис. 1.

См. также

• :focus для полей формы
• background-clip
• border
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• Блочные элементы
• Добавление треугольника
• Колесо для сокращённых свойств
• Открываем блочную модель
• Оформление ссылок
• Повёрнутые рамки
• Рамка вокруг изображений
• Состояния кнопок
• Строчные элементы

Рецепты

• Как добавить рамку вокруг кнопки?
• Как добавить рамку вокруг ячеек?
• Как добавить рамку к изображению при наведении?
• Как добавить рамку к изображению?
• Как сделать градиентную рамку?
• Как сделать рамку вокруг таблицы?

Схема двухколоночного макета сайта в CSS

Давайте сделаем двухколоночный макет следующего вида:

Для начала создадим основную структуру страницы:

Теперь назначим стили врапперу, выровняв его по центру экрана:

Зададим теперь стили хедера и футера:

#header < height: 200px; border: 1px solid black; >#footer < height: 200px; border: 1px solid black; >

Как вы видите, мы задаем хедеру и футеру высоту. Мы делаем это, как как в нашей схеме у них нет содержимого. При наличии содержимого высоту блокам задавать не стоит — она будет формироваться их содержимым.

Обратите также внимание на то, что мы не задаем им ширину. Дело в том, что хедер и футер — блочные элементы и их ширина будет автоматически равна ширине враппера.

Давайте теперь зададим им пэддинг, чтобы текст не прилипал к границам:

#header < height: 200px; padding: 20px; border: 1px solid black; >#footer < height: 200px; padding: 20px; border: 1px solid black; >

Наличие пэддинга, однако, плохо повлияет на размеры блоков — они станут больше, чем указано. Давайте изменим поведение всех блоков так, чтобы пэддинг и границы не расширяли наши блоки:

Теперь нам нужно поставить контент и сайдбар в один ряд. Сделаем это с помощью флексов:

Укажем контенту и сайдбару их ширину. При этом сумма их ширин должна быть равна ширине враппера:

#content < width: 800px; >#sidebar < width: 200px; >

Пусть мы хотим сделать отступ между сайдбаром и контентом. В этом случае сайдбару нужно поставить марджин. При этом нам придется от кого-то отщипнуть ширину для этого марджина. Отщипнем от контента, соответственно уменьшив его ширину:

#content < width: 780px; >#sidebar < width: 200px; margin-right: 20px; >

Давайте теперь добавим высоту, так как наши элементы не содержат содержимого. Достаточно добавить высоту только одному элементу, ведь второй флекс элемент подстроится по высоте (почему?). Давайте зададим высоту контенту:

#content < width: 780px; height: 700px; >#sidebar < width: 200px; margin-right: 20px; >

Давайте добавим контенту и сайдбару остальные стили:

#content < width: 780px; height: 700px; padding: 20px; border: 1px solid black; >#sidebar < width: 200px; margin-right: 20px; padding: 20px; border: 1px solid black; >

Все, наш макет готов. Соберем весь код вместе: