css根据内容设置边框 |零基础学html css 光盘

.box {
padding: 10px;
border: 1px solid #ccc;
display: inline-block;
}
.box:after {
content: "";
display: block;
height: 100%;
width: 0;
clear: both;
}
.box p {
margin: 0;
}

上面的代码就是实现根据内容设置边框的示例代码。大家首先给需要设置边框的元素添加一个padding和border，然后通过伪元素:after来添加一个clear:both属性，使得元素可以自适应高度。接着，大家将需要设置边框的元素设为inline-block，这样它就可以根据内容自动调整宽度。

最后，大家将需要设置边框的元素里的p标签的margin设置为0，这样就可以让内容和边框之间没有多余的空隙了。

通过这些简单的CSS技巧，大家就可以轻松地根据内容设置边框了。无论是动态生成的还是静态的内容，都可以使用这种方法来设置边框，让大家的页面看起来更加美观，也更符合用户的需求。