Space between border and content? / Border distance from content?

Issue

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

Solution

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

Answered By – Thomas Shields

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published