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
}

边距位于边框之外（参见下图，它来自Chrome开发者工具。蓝色是元素的内容，填充是元素的内部空间，黄色是边框，边距是元素的外部空间。请注意，边框周围有一个黑框，这是元素本身的边缘，边缘是外部的额外空间。