Размещение границы внутри div, а не на ее краю

у меня есть <div> элемент, и я хочу поставить на него границу. Я знаю, что могу писать!--1-->, но это добавляет 2px к любой стороне div, что не то, что я хочу.

Я бы предпочел, чтобы эта граница была -1px от края div. Сам div-100px x 100px, и если я добавляю границу, то мне нужно сделать некоторую математику, чтобы граница появилась.

есть ли способ, которым я могу сделать границу, и убедитесь, что поле по-прежнему будет 100px (включая граница)?

378
border css css3 html

11 ответов

Set box-sizing свойство border-box:

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}
<div>Hello!</div>
<div>Hello!</div>

Он работает в IE8 & выше.

549

вы также можете использовать box-shadow следующим образом:

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

пример: http://jsfiddle.net/nVyXS/ (наведите, чтобы смотреть граница)

это работает только в современных браузерах. Например: Не т. е. 8 поддержка. см caniuse.com (функция box-shadow) для получения дополнительной информации.

268

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

внутренняя граница через box-shadow свойство css

да, box-shadow используется для добавления box-shadows к элементам. Но вы можете указать inset тень, это будет выглядеть как внутренняя граница, скорее как тень. Вам просто нужно установить горизонтальные и вертикальные тени для 0px и "spread" свойства box-shadow к ширине границы, которую вы хотите иметь. Поэтому для "внутренней" границы 10px вы напишете следующее:

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

здесь jsFiddle пример, который иллюстрирует разницу между box-shadow граница и "нормальная" граница. Таким образом, ваша граница и ширина поля имеют общую 100px, включая границу.

подробнее о box-shadow:здесь

граница через свойство CSS контура

вот еще один подходите, но таким образом граница будет вне коробки. Вот пример. Как следует из примера, вы можете использовать CSS outline свойства, чтобы установить границу, которая не влияет на ширину и высоту элемента. Таким образом, ширина границы не добавляется к ширине элемента. 

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

подробнее о схема: здесь

71

Yahoo! Это действительно возможно. Я нашел его.

Для Нижней Границы:

div {box-shadow: 0px -3px 0px red inset; }

Для Верхней Границы:

div {box-shadow: 0px 3px 0px red inset; }
30

использовать псевдо элемент:

.button {
    background: #333;
    color: #fff;
    float: left;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
}
<div class='button'>Hello</div>

используя ::after вы стилизуете виртуальный последний дочерний элемент выбранного элемента. content свойство создает анонимный заменить элемент.

мы содержим псевдо-элемент, используя абсолютное положение относительно родителя. Тогда у вас есть свобода иметь любой пользовательский фон и / или границу в фоновом режиме вашего основного элемент.

этот подход не влияет на размещение содержимого основного элемента, которое отличается от использования box-sizing: border-box;.

Рассмотрим пример:

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    border: 5px solid #f00;
    border-left-width: 20px;
    box-sizing: border-box;
}
<div class='parent'>
    <div class='button'>Hello</div>
</div>

здесь .button ширина ограничена с помощью родительского элемента. Установка border-left-width регулирует размер содержимого и, таким образом, положение текста.

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}
<div class='parent'>
    <div class='button'>Hello</div>
</div>

использование псевдоэлемента подход не влияет на размер content-box.

в зависимости от приложения подход с использованием псевдо-элемента может быть или не быть желательным поведением.

20

Я знаю, что это несколько старше, но так как ключевые слова "граница внутри" приземлились прямо здесь, я хотел бы поделиться некоторыми выводами, которые, возможно, стоит упомянуть здесь. Когда я добавлял границу состояния наведения, я получил эффекты, о которых говорит OP. Граница объявления пикселей в размер коробки, которая сделала его нервным. Существует еще два способа справиться с этим, которые также работают для IE7.

1) Имейте границу уже прикрепленную к элементу и просто измените цвет. Таким образом, математика уже включена.

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2 ) Компенсируйте границу отрицательной маржей. Это все равно добавит дополнительные пиксели, но позиционирование элемента не будет нервным на 

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}
6

хотя на этот вопрос уже был дан адекватный ответ с помощью решений, использующих box-shadow и outline свойства, я хотел бы немного расширить это для всех тех, кто приземлился здесь (как и я) в поисках решения для внутренней границы с смещение

Итак, предположим, у вас есть черный 100px x 100px div и вам нужно вставить его с белой каймой-которая имеет внутреннее смещение 5px (скажем) - это все еще можно сделать с вышеуказанными свойствами.

5

для согласованного рендеринга между новыми и старыми браузерами добавьте двойной контейнер, внешний с шириной, внутренний с границей.

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

это, очевидно, только если ваша точная ширина более важна, чем дополнительная разметка!

3

Если вы используете box-sizing: border-box означает не только границу, прокладка, запас, etc. Все элементы придут внутрь родителя элемент.

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;
  
}
<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>
2

вы можете использовать свойство outline и outline-offset в отрицательном значении, wor для меня:

outline: 2px solid red;
outline-offset: -2px;
1

лучшее решение для кросс-браузера (в основном для поддержки IE), как @Steve сказал, чтобы сделать div 98px по ширине и высоте, чем добавить границу 1px вокруг него, или вы можете сделать фоновое изображение для div 100x100 px и нарисовать границу на нем.

0