边框和内容之间的空间？ /距内容的边界距离？ [英] Space between border and content? / Border distance from content?

问题描述

是否可以增加边框与其内容之间的距离？
如果可能的话，就在这里做： JSFiddle

Is it possible to increase the distance between a border and its content? If it is possible, just do it on here: JSFiddle

我打算做的是在内容周围放置发光效果（使用距离为0px / 0px的阴影），然后将边框与发光效果相距几个像素。

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.

注意：我决定改用嵌入式阴影和边框，它看起来更好，但感谢您的回答：3

推荐答案

添加填充。填充元素会增加其内容和边框之间的空间。但是，请注意，框阴影将从边框在边框之外而不是内容开始，这意味着您不能在阴影和框之间放置空格。或者，您可以在元素上使用：before或：after伪选择器来创建一个稍大的框，将阴影放置在该框上，如下所示： http://jsbin.com/aqemew/edit#source

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

这篇关于边框和内容之间的空间？ /距内容的边界距离？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！