CSS属性之padding

本文主要是介绍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;}