CSS 边距底部 - CSS

CSS 边距底部是指在一个元素的底部添加上外边距(margin)。在 CSS 中，您可以通过以下方式设置外边距底部:

margin-bottom: 值;

其中，值可以是具体像素(px)、百分比(%)、图像等。

具体语法

selector {
  margin-bottom: length|initial|inherit;
}

• length: 定义一个固定的外边距长度值。
• initial: 表示此属性会被设置为它的默认值。
• inherit: 表示此属性会从父元素继承。

实例说明

对象

HTML：

<div class="box">CSS边距底部</div>

CSS:

.box {
  width: 100px;
  height: 50px;
  margin: 20px 0 50px 0;
  background-color: #f1c40f;
}

上述CSS代码会在盒子的顶部、底部、左、右分别有20px、20px、0、0 的内边距。

图像

.box img {
  margin-bottom: 20px;
}

以上代码将为 .box 元素下的所有图片设置 20px 的外边距底部。

百分比

.box {
  margin-bottom: 10%;
}

上述代码表示 .box 的外边距底部相对于其父元素的高度是 10%。

总结

CSS边距底部是CSS的基本属性之一。

它可用于设置元素的外边距底部，可以使你的页面在视觉上更美观、更清晰。同时，它也方便了我们在页面中定位元素，使我们更好地掌握网页结构的呈现。