使用CSS层叠样式表来设置底边距

主题

在html中如何使用样式表来设置底边距？

解释

属性: 底部边距

用法:
margin-bottom: 10px;
margin-bottom: 10pt;
margin-bottom: 10%;
margin-bottom: auto;

定义:

我们经常要对目标设置边距。现在我们要设置目标的底边距。
属性可以取以下的值。
a)pt:以点为单位来设置属性值(例如:10pt或者100pt)。
b)px:以像素为单位设置属性值(例如:10px或者100px)。
c)%:以百分数为单位来设置属性值(例如:10%或者100%).
d)auto:这是用来设置自动/默认底边距的。

示例1:

<div style="margin-bottom: 20px;">测试底部边距</div>

结果:

测试底部边距

注意:你可以看到文本从底线移动了20像素。.

示例2:

<div style="margin-bottom: 30pt;">测试底部边距</div>

结果:

测试底部边距

注意:你可以看到文本从底线移动了30点。

示例3:

<div style="margin-bottom: 10%;">测试底部边距</div>

结果:

测试底部边距

注意:你可以看到文本从底线移动了10％。

示例4:

<div style="margin-bottom: auto;">测试底部边距</div>

结果:

测试底部边距

CSS层叠样式表底边距