Обивка на границе раздела

Question

Я хочу разместить отступы на границе CSS.Потяните его внутрь div, от края.Возможно ли это с помощью css (css3 в порядке, webkit).

Вот дизайн.

Я сделал это, поместив div внутри div,тогда дайте границу внутреннему div.Я хочу сделать разметку как можно более тонкой, поэтому я хочу использовать только один div, если это возможно.

Спасибо.

Answer 1

Вы должны быть в состоянии сделать это с помощью свойства CSS outline:

<style>
.outer {
       outline: 2px solid #CCC;
       border: 1px solid #999;
       background-color: #999;
       }
</style>

<div class="outer">
example
</div>

Answer 2

Вместо границ вы можете использовать свойство структуры:

div{
height:300px;
width:500px;
background-color:lightblue;
outline:dashed;
outline-offset:-10px;    
}

http://jsfiddle.net/H7KdA/

Answer 3

Вы можете сделать это, создав внутренний div с желаемыми границами и внешний div с display: table. Примерно так:

<style>
    .outer {
        background: #ccc;
        display: table;
        width: 400px;
    }

    .inner {
        border: 2px dashed #999;
        height: 50px;
        margin: 5px;
    }

</style>

<div class="outer">

<div class="inner">
</div>

</div>

Answer 4

К сожалению, без добавления еще одного div, я не думаю, что вы можете сделать это только с помощью CSS.

Чем сложнее становится ваш дизайн, тем больше вероятность того, что вам понадобятся посторонние HTML-теги.

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

Удачи.

Answer 5

Заполнение вокруг границы (которая отделяет ее от края) называется полем: для получения дополнительной информации см. Модель коробки .

Answer 6

Нет, это невозможно. Отступы, поля и границы - это все части элементов, вы не можете дать отступам или границам границы.

Может быть, если вы опубликуете пример того, что вы пытаетесь сделать, мы сможем найти альтернативные решения?

-update- Глядя на ваш пример, я боюсь, что это все еще невозможно, по крайней мере, не с одним div. Я тоже не фанат дивита, но в этом случае, вероятно, лучше использовать дополнительный div.