Question

我想在即将到来的幽灵仪表板中使文本元素围绕它有一个边框：Ghost blog

我做到了：

    border: 10px solid #ffffff;

然而，这适用于高度而不是宽度。宽度要宽得多。我知道我可以将宽度设置为某些东西但是我希望在更改文本时更新宽度，因此每侧的文本和框之间总是有一定的空间。

我不知道如何做到这一点，或者它是否需要JS，或者是否可以使用纯CSS来完成。

Answer 1

为了做到这一点，您将要在display:inline-block;元素上使用填充和span。例如：

HTML

<span>GHOST</span>

CSS

span {
    padding: 10px;
    border: 10px solid white;
    display: inline-block;
}

这将允许文本周围的边框根据长度缩小和增长。无论大小如何，它还会在边框和字母之间保留10px的空间。

这是一个小提琴：http://jsfiddle.net/ZDzn2/

Answer 2

如果我理解正确，你希望边框宽度包含在css-width中？！

然后你应该通过CSS尝试box-sizing属性：

box-sizing: border-box

box-sizing CSS属性用于更改用于计算元素宽度和高度的默认CSS框模型。可以使用此属性来模拟不正确支持CSS框模型规范的浏览器的行为。 [来源：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing]

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

[来源：http://css-tricks.com/box-sizing/]

如何制作包裹文本的边框

2 个答案: