CSS属性之padding

0.inline元素中的padding

大家都知道padding对于block元素和inline-block元素的影响，而对于inline元素，padding只会在水平方向产生影响，垂直方向不会产生影响。

这么说其实不准确，给inline元素设置垂直方向的padding，不会改变元素的高度，也不会影响其他元素，但是会改变他自身的背景的高度。

<div class="wrap">
  这是一小段文字，但是在这段文字当中有一个inline元素span，<span class="con">这就是span</span>,垂直方向上的padding不会影响其他元素，但是同样会改变他自身的背景大小
</div>

 

* {margin:0; padding:0;}

.wrap {
  width: 400px;
  height: 500px;
  margin: 50px auto;
  border: 1px solid #ccc;
}
.con {
  padding: 8px;
  background-color: #f32;
}

效果图：

1.百分比值的padding

对于inline-block元素和block元素，当元素的padding值为百分比的时候，其实际的padding值等于父元素的宽度*百分比值；

对于绝对定位元素而言，实际padding值等于第一个相对定位的父元素的宽度*百分比。

 

通过这个特点，我们可以实现一些比较有意思的效果，比如通过inline-block元素来实现响应式的正方形。

<div class="wrap">
  <div class="con red"></div>
  <div class="con green"></div>
  <div class="con yellow"></div>
  <div class="con blue"></div>
</div>

* {margin:0; padding:0;}

.wrap {
  width: 400px;
  height: 800px;
  margin: 50px auto;
  border: 1px solid #ccc;
  font-size: 0;
}
.con {
  display: inline-block;
  padding: 25%;
}
.red {background-color: red;}
.green {background-color: green;}
.yellow {background-color: yellow;}
.blue {background-color: blue;}