代码示例:
.box{ margin-top: 10px; margin-right: 20px; margin-bottom: 15px; margin-left: 20px; }
上述代码中,.box
是一个类名,为某个网页元素设定外边距。通过margin-top
设置该元素与其上方元素的间距,margin-right
设置右侧间距,margin-bottom
设置下方间距,而margin-left
则设置左侧间距。
需要注意的是,margin
属性也支持单值、双值、三值等多种写法,分别对应不同位置的外边距值,例如:
.box{ margin: 10px; //统一设置四个方向的值 margin: 10px 20px; //分别设置上下、左右两个方向的值 margin: 10px 20px 30px; //分别设置上、左右、下三个方向的值 margin: 10px 20px 30px 40px; //分别设置上、右、下、左四个方向的值 }
总结起来,margin
属性是用来控制元素与其它元素之间的距离的,通过单独或组合使用margin-top
,margin-right
,margin-bottom
,margin-left
四个属性可以设置不同方向的间距值,而margin
属性则是上述四个属性的简写形式,可根据实际需求进行使用。