原创作品,未经许可不得转载
先来看看在上一节课中做的练习,运行下方的代码:
<!DOCTYPE html>
<html>
<head>
<title>CSS基础课程</title>
</head>
<body>
<div name="head" style="background-color:#000000">
<a href="/index.html">首页</a>
<a href="/index.html">登录页</a>
</div>
<div>
<h1>登录</h1>
</div>
</body>
</html>
注意到了吗?在<div name="head">
内,文本离边缘太近了,这样在视觉体验上不够好。
可以为<div name="head">
设个“内边距”,使它里面的内容离边缘有一定的距离。
通过给元素设置padding
样式来设置它的内边距:
<!DOCTYPE html>
<html>
<head>
<title>CSS基础课程</title>
</head>
<body>
<div name="head" style="background-color:#000000; padding:10px">
<a href="/index.html">首页</a>
<a href="/index.html">登录页</a>
</div>
<div>
<h1>登录</h1>
</div>
</body>
</html>
padding:10px
的意思是:将元素的内边距设为10px
。这样,这个元素内的上、下、左、右就会有10px
的空白区。
为了加深理解,再来看另一个示例:
<div style="padding:30px; background-color:#000000">
<div style="background-color:red">子元素</div>
</div>
运行上方的代码,子元素的红色区域是不是离父元素的四个边都有一定的距离?
padding:30px
将元素的上、下、左、右的四个内边距都设为了30px
。
如果希望上、下、左、右四个内边距不同呢?
其实,padding
样式的值可以是四个值组成的组合。例如:
<div style="padding:10px 20px 30px 40px; background-color:#000000">
<div style="background-color:red">子元素</div>
</div>
上方的代码中,padding:10px 20px 30px 40px
的意思是:将“上内边距”设为10px
,将“右内边距”设为20px
,将“下内边距”设为30px
,将“左内边距”设为40px
。
padding
的四个值分别对应上、右、下、左内边距。
请留意padding
的四个值的写法,在四个值之间需用空格分隔。
其实,padding:10px
是padding:10px 10px 10px 10px
的简写。
还有另外几种简写方式:
padding:10px 20px 10px 20px
可简写为padding:10px 20px
。
padding:10px 20px 30px 20px
可简写为padding:10px 20px 30px
。
从元素的“上边”开始,依顺时针方向,依次对应padding
的四个值。“下”与“上”相对应,“左”与“右”相对应。若缺少某个边值,则该边的值与它对应的那个边的值相同。例如,paddig:10px 20px 30px
缺少第四个边的值,即缺少左内边距的值,与“左”相对应的是“右”,所以padding:10px 20px 30px
的左内边距与右内边距相同,即20px
。
如果仅需要设置某一个边的内边距,可设置元素的padding-top
、padding-right
、padding-bottom
、padding-left
样式,它们分别对应元素的上内边距、右内边距、下内边距、左内边距:
<div style="padding-top:10px; padding-right:20px;
padding-bottom:30px; padding-left:40px;
background-color:#000000">
<div style="background-color:red">子元素</div>
</div>
给元素设置padding-left:10px; padding-right:20px; padding-bottom:30px; padding-left:40px
与给元素设置padding:10px 20px 30px 40px
是等效的。