CSS - 内边距

  • 作者:KK

  • 发表日期:2016.1.26


内边距属性paddingmargin是相反的属性,margin控制外部的边距,它则控制内部的边距,实例:

<body>
	<div style="border:1px solid red;">内容第1行</div>
	<div style="margin-top:20px; padding-top:10px; border:1px solid red;">内容第1行</div>
</body>

实例中用黑边框描绘了div的大小区域,在加了padding-top属性后,第2个div的内容被div从内部顶部增加了10个像素的距离才开始显示内容,这就是内边距的效果,外边距的作用范围就是黑线外面的范围,内边距就是黑线里面的范围.

如果只写padding:10px;也是完全和margin一模一样表示上下左右都这个距离,要么就单独加-left,-right这些方向词来修饰单独的方向内边距,这个我不多说了,如果你有学好margin的用法,反过来理解就会用padding了


副作用:撑大了容器

padding会使得容器原来的大小变增加,下面定义了100*100的一个区域作为容器去装载文字,但增加10px的padding-top后自己的高度增大了10px变成110px

<body>
<div style="width:100px; height:100px; padding-top:10px; border:1px solid red;">容器里面的文字文字文字...</div>
</body>

那么如果不是padding-top而是直接padding的话,则上面增加10px,下面又增加10px,高度就变成了120,而左右也是这个道理

反正用了padding就会把自己变肥,小心着用哦!一般没事别乱用padding,宽度超出你的预期就不好了!