Space between border and content Border distance from content

Question

Is it possible to increase the distance between a border and its content  If it is possible  just do it on here  JSFiddle  What I plan on doing is putting a glow around the content  using a shadow with 0px 0px distance  and then putting a border a couple of pixels away from the glow   NOTE  I have decided to do an inset shadow and a border instead  it looks better  but thanks for the answers  3

User · Answer

You could try adding an lt hr gt and styling that  Its a minimal markup change but seems to need less css so that might do the trick   fiddle   http   jsfiddle net BhxsZ

User · Answer

Just wrap another div around it  which has the border and the padding you want

User · Answer

Add padding  Padding the element will increase the space between its content and its border  However  note that a box-shadow will begin outside the border  not the content  meaning you can t put space between the shadow and the box  Alternatively you could use  before or  after pseudo selectors on the element to create a slightly bigger box that you place the shadow on  like so  http   jsbin com aqemew edit source

User · Answer

Its possible using pseudo element  after   I have added to the original code a position relative and some margin  Here is the modified 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

User · Answer

You usually use padding to add distance between a border and a content However  background are spread on padding   You can still do it with nested element   html      lt div id  outter  gt       lt div id  inner  gt          test      lt  div gt   lt  div gt    outter div     border-style  ridge  border-color   567498  border-spacing 10px  min-width  100px  min-height  100px  float left    inner 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

User · Answer

If you have background on that element  then  adding padding would be useless    So  in this case  you can use background-clip  content-box  or outline-offset  Explanation  If you use wrapper  then it would be simple to separate the background from border  But if you want to style the same element  which has a background  no matter how much padding you would add  there would be no space between background and border  unless you use background-clip or outline-offset

[css] Space between border and content? / Border distance from content?

Examples related to css