Posted on | by liu
使用CSS设置外边距（Margin）和内边距（padding）是网页设计中很重要的一部分。设置外补白可以使元素与其周边元素保持距离，使网页看起来更美观和清晰。
在CSS中，通过对元素添加 margin 属性来设置外补白。margin 属性的值可以是一个或多个数值，以空格或逗号隔开。同时，值的数量也可以只有一个或两个。如果只有一个值，它将应用于所有四个方向的边距。如果有两个值，第一个值将应用于顶部和底部的边距，第二个值将应用于左侧和右侧的边距。如果有四个值，则它们依次应用于顶部、右侧、底部和左侧的边距。
例如，如果要将元素的外补白设置为 10 像素的顶部和底部边距，20 像素的左侧和右侧边距，则可以添加以下样式：
p {
margin: 10px 20px;
}类似的，通过添加 padding 属性，可以设置元素内边距。 padding 属性的值与 margin 属性的值设置方法类似，但是它们的应用方式有所不同。 padding 值会影响元素的内部内容，而 margin 值会影响元素周围的空间。
例如，如果想要给元素添加 5 像素的内补白，则可以添加以下样式：
p {
padding: 5px;
}需要注意的是，元素的外补白和内补白可能会影响元素的宽度和高度。如果元素的宽度或高度已经固定，那么添加外补白或内补白时要特别小心。需要在计算宽度或高度时将边距考虑在内，以避免布局出现问题。
综上所述，通过使用 margin 和 padding 属性，大家可以轻松地设置元素的外补白和内补白，使网页更加美观和易于阅读。在实际使用过程中，需要根据实际情况灵活运用。