CSS Margin和Padding属性

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>
发布了63 篇原创文章 · 获赞 55 · 访问量 2475

猜你喜欢

转载自blog.csdn.net/devin_xin/article/details/105069306