Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

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

like image 620
Henry-95 Avatar asked Aug 10 '11 13:08

Henry-95


People also ask

How do you put space between border and content?

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.

What is the space inside a border between the border and the element content called?

The Architecture: The content is surrounded by the border, the space between the content and the border is called the padding, while the space between the border and the other elements in the document is called the margin.

Which CSS property is used to define the space between elements border and content?

Padding is used to create space around an element's content, inside of any defined borders.


1 Answers

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

like image 99
Thomas Shields Avatar answered Oct 23 '22 08:10

Thomas Shields