30、CSS 样式优化：从基础到高级的全面指南

CSS 样式优化：从基础到高级的全面指南

1. 测试内边距与外边距

在 CSS 中，内边距（padding）和外边距（margin）是控制元素布局的重要属性。我们先来看一个示例：

.guarantee {
    border-color: black;
    border-width: 1px;
    border-style: solid;
    background-color: #a7cece;
    padding: 25px;
    margin: 30px;
}

在上述代码中，我们为 .guarantee 类的元素设置了边框、背景颜色、内边距和外边距。设置 25 像素的内边距后，文本内容边缘与边框之间会有 25 像素的空间。同时，背景颜色会覆盖内容区域和内边距区域，但不会延伸到外边距。

添加外边距也很简单，我们可以为整个保证段落添加 30 像素的外边距：

.guarantee {
    border-color: black;
    border-width: 1px;
    border-style: solid;
    background-color: #a7cece;
    padding: 25px;
    margin: 30px;
}

当在浏览器中重新加载页面时，你会发现保证段落的文本两侧有了更多的空间，文本与边框之间有了间隔，阅读起来更加舒适。而添加外边距后，段落会更加突出，与其他文本区分开来，