Вне внешней границы CSS

Я хочу, чтобы иметь возможность рисовать границу вне моего Div! Поэтому, если мой div говорит 20px на 20px, я хочу 1px границу за пределами этого (так что по сути, я получаю div 22x22px большой).

Я понимаю, что я могу просто сделать div 22x22 для начала, но по причинам, которые у меня есть, мне нужны границы, чтобы быть снаружи.

Наброски CSS работают, но мне нужна только нижняя граница или верхняя граница, поэтому что-то вроде контура-дна, которое не работает, - это то, что я хочу.

Есть ли способ сделать это?

Спасибо

Ответы

Ответ 1

Я думаю, что вы немного разобрались в двух свойствах. Граница влияет на внешний край элемента, делая элемент разным по размеру. Контур не изменяет размер или положение элемента (не занимает места) и выходит за границу. Из вашего описания вы хотите использовать свойство border.

Посмотрите на простой пример ниже в вашем браузере:

<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>

<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>

Ответ 2

IsisCode дает вам хорошее решение. Другой - установить границу div внутри родительского div. В этом примере http://jsfiddle.net/A2tu9/

UPD: Вы также можете использовать псевдоэлемент :after (:before), в этом случае HTML не будет загрязнен дополнительной разметкой:

.my-div {
    position: relative;
    padding: 4px;
    ...
}
.my-div:after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    bottom: -3px;
    right: -3px;
    border: 1px #888 solid;
}

Демо: http://jsfiddle.net/A2tu9/191/

Ответ 3

Попробуйте свойство контура W3Schools - Структура CSS

Контур не будет мешать ширине и длине элементов /div!

Пожалуйста, нажмите ссылку, которую я предоставил внизу, чтобы увидеть рабочие демонстрации различных способов создания границ и внутренних/внутренних границ, даже тех, которые не нарушают размеры элемента! Не нужно добавлять дополнительные divs каждый раз, как указано в другом ответе!

Вы также можете комбинировать границы с контурами и, если хотите, box-shadows (также показаны по ссылке)

<head>
   <style type="text/css" ref="stylesheet">
      div {
        width:22px;
        height:22px;
        outline:1px solid black;
      }
   </style>
</head>
<div>
    outlined
</div>

Обычно по умолчанию "border:" помещает границу за пределы ширины, измерение, добавляя к габаритам, если вы не используете значение "inset":

div {border: inset solid 1px black};

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

Надеюсь, что это поможет

PS: Я также был вдохновлен сделать это для вас: Использование границ, контуров и теней теней

Ответ 5

Уже поздно, но я столкнулся с подобной проблемой.
Моим решением были псевдоэлементы - без дополнительной разметки, и вы можете нарисовать границу, не влияя на ширину.
Поместите псевдоэлемент абсолютно (с основным позиционированным относительно) и whammo.

Смотрите ниже, JSFiddle здесь.

.hello {
    position: relative;
    /* Styling not important */
    background: black;
    color: white;
    padding: 20px;
    width: 200px;
    height: 200px;
}

.hello::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: -5px;
    right: -5px;
    bottom: 0;
    border-left: 5px solid red;
    border-right: 5px solid red;
    z-index: -1;
}

Ответ 6

Поместите свой div внутри другого div, примените границу к внешнему div с n количеством отступов/полей, где n - это пространство, которое вы хотите между ними.