html - CSS如何将文本推离边框

Question

基本上我有一个容器的代码，它在我身边放置小部件:

然而，正如您所看到的，文本正在触及边框。有没有什么办法解决这一问题？我不太确定如何在 CSS 中执行此操作。

.widget {
    margin-bottom:20px;
    border-style:clear;
}
.widget h2 {
    margin:0 0 10px 0;
    padding:0 5px;
    font-weight:normal;
    border-bottom:1px solid #21a1e1;
}
.widget .inner {
    margin:0 10px;
    border-style:clear;
}

/* Aside */
aside {
    width:260px;
    float:right;
    border-top: 1px solid #21a1e1;
    border-left:1px solid #21a1e1;
    border-right: 1px solid #21a1e1;
    border-bottom: 1px solid #21a1e1;
    padding-left:0px;
}

Answer 1

假设 aside 类是侧边栏的类，您只需添加一个 margin-left: 20px; (或您想要的任何值)到类定义:

aside {
    width: 260px;
    float: right;
    border-top: 1px solid #21a1e1;
    border-left: 1px solid #21a1e1;
    border-right: 1px solid #21a1e1;
    border-bottom: 1px solid #21a1e1;
    padding-left: 0px;
    margin-left: 20px; // Add here
}

margin 在边框外(见下图，来自 Chrome 开发者工具。蓝色是元素的内容，padding 是元素的内部空间，黄色是边框，margin 是元素的外部空间。注意边框周围有一个黑框，这是元素本身的边缘，边距是外部的额外空间。