css的margin缩写方式有效提高书写效率

前端技术 2023/09/08 CSS

复制代码
代码如下:

<html>
<body>
<div style=\"border: 1px solid red;\">
<div style=\"border: 1px solid blue; margin: 20px;\">
margin: 20px;（上、下、左、右各20px。）
</div>
</div>
<div style=\"border: 1px solid red;\">
<div style=\"border: 1px solid blue; margin: 20px 40px;\">
margin: 20px 40px;（上、下20px；左、右40px。）
</div>
</div>
<div style=\"border: 1px solid red;\">
<div style=\"border: 1px solid blue; margin: 20px 40px 60px;\">
margin: 20px 40px 60px;（上20px；左、右40px；下60px。）
</div>
</div>
<div style=\"border: 1px solid red;\">
<div style=\"border: 1px solid blue; margin: 20px 40px 60px 80px;\">
margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）
</div>
</div>
<p>在css中使用margin可以将margin-top，margin-right，margin-bottom，margin-left，缩写为一个标记，顺序为<span style=\"color: #ff0000\"><strong>上右下左</strong></span>（顺时针）。</p>
<p>margin标记可以带一个、二个、三个、四个参数，各有不同的含义。</p>
</body>
</html>

本文地址：https://www.stayed.cn/item/22249

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案