CSS Margin和Padding属性

最新推荐文章于 2021-06-19 10:51:57 发布

万万君

最新推荐文章于 2021-06-19 10:51:57 发布

阅读量221

点赞数 1

分类专栏：笔记 CSS HTML 文章标签： html css

本文链接：https://blog.csdn.net/devin_xin/article/details/105069306

版权

笔记同时被 3 个专栏收录

80 篇文章 0 订阅

订阅专栏

HTML

35 篇文章 0 订阅

订阅专栏

CSS

24 篇文章 0 订阅

订阅专栏

Margin（外边距）属性

作用

定义元素周围的空间
接受任何长度单位、百分数值甚至负值
清除周围的元素（外边框）的区域，margin没有背景颜色，是完全透明的
可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性

值得范围

值	说明
auto	设置浏览器边距（这样做的结果会依赖于浏览器）
length	定义一个固定的margin（使用像素，pt，em等）
%	定义一个使用百分比的边距

Padding（填充）属性

所有属性

属性	说明
padding	使用缩写属性设置在一个声明中的所有填充属性
padding-bottom	设置元素的底部填充
padding-left	设置元素的左部填充
padding-right	设置元素的右部填充
padding-top	设置元素的顶部填充

作用及注意事项

定义元素边框与元素内容之间的空间
当被清除时，所"释放"的区域将会受到元素背景颜色的填充
可以指定不同的侧面不同的填充
百分比数值是相对于其父元素的 width 计算的，如果改变了父元素的 width，则它们也会改变

值得范围

值	说明
length	定义一个固定的填充(像素, pt, em,等)
%	使用百分比值定义一个填充

代码示例

<html>
<head>
<meta charset="utf-8"> 
<style>
p.ex1 {padding:2em;}
p.ex2 {padding:0.5em 3em;}
</style>
</head>

<body>
<p class="ex1">This text has equal padding on each side. The padding on each side is 2em.</p>
<p class="ex2">This text has a top and bottom padding of 0.5em and a left and right padding of 3em.</p>
</body>
</html>