Пространство между границей и контентом?/Пограничное расстояние от контента?

Можно ли увеличить расстояние между границей и ее содержимым? Если это возможно, просто сделайте это здесь: JSFiddle

То, что я планирую делать, это добавить свечение вокруг содержимого (используя тень с расстоянием 0px/0px), а затем установить границу на пару пикселей от свечения.

ПРИМЕЧАНИЕ. Я решил вместо этого вставить тень и границу, это выглядит лучше, но спасибо за ответы: 3

Ответы

Ответ 1

Добавить дополнение. Заполнение элемента увеличивает пространство между содержимым и границей. Однако обратите внимание, что тень коробки будет начинаться за пределами границы, а не с содержимым, то есть вы не можете поместить пространство между тенью и полем. В качестве альтернативы вы можете использовать: до или: после псевдоселекторов в элементе, чтобы создать немного большую коробку, в которую вы помещаете тень, например: http://jsbin.com/aqemew/edit#source

Ответ 2

Возможно его использование псевдоэлемента (после).
Я добавил к исходному коду a

position:relative

и некоторую маржу.
Вот модифицированный JSFiddle: http://jsfiddle.net/r4UAp/86/

#content{
  width: 100px;
  min-height: 100px;
  margin: 20px auto;
  border-style: ridge;
  border-color: #567498;
  border-spacing:10px;
  position:relative;
  background:#000;
}
#content:after {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  border: red 2px solid;
}

Ответ 3

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

Вы все еще можете сделать это с вложенным элементом.

html:

<div id="outter">
    <div id="inner">
        test
    </div>
</div>

outter div:

border-style: ridge;
border-color: #567498;
border-spacing:10px;
min-width: 100px;
min-height: 100px;
float:left;

внутренний div:

width: 100px;
min-height: 100px;
margin: 10px;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(39,54,73)),
    color-stop(1, rgb(30,42,54))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(39,54,73) 0%,
    rgb(30,42,54) 100%
        );}

Ответ 4

Просто оберните еще один div вокруг него, у которого есть граница и требуемое дополнение.

Ответ 5

Вы можете попробовать добавить <hr> и стиль. Его минимальное изменение разметки, но, похоже, ему нужно меньше css, чтобы это могло сделать трюк.

скрипка:

http://jsfiddle.net/BhxsZ/