Question

我正在尝试减少标题文字的边框大小，使其完全适合。我目前正在使用border: 10px solid;。

这是我所拥有的小提琴：http://jsfiddle.net/hy8f989x/

HTML：

<div class = "container">

    <div class = "banner bounce">

        <h1 class="banText">Hello!</h1>

    </div>

</div>

CSS：

.banner {
    font-family: 'Slabo 27px', sans-serif;
    font-size: 50px;
    text-align: center;
    color: #f0f0f0;
    margin-top: 100px;
}

.banText {
    border: 10px solid;
    display: inline-block;
    margin: 0;
}

body {
    background: url("https://s3.amazonaws.com/f.cl.ly/items/3O2o342K3O1C1M2P461x/%201920x1080%20Wallpaper.png");
    background-size: 1920px 1080px;
    background-repeat: no-repeat;
}

正如您所看到的，边框在整个屏幕上延伸，我想要的是减小边框的宽度/宽度（不是厚度），并与文本完美契合。

Answer 1

将display: inline添加到.banText

.banText {
    border: 10px solid;
    display: inline;
}

如何在CSS中调整边框大小？

1 个答案: