CSS基础课程登入/注册
在小屏设备上仅提供基本的浏览功能
请使用电脑打开此网页,体验更多强大功能

内边距

原创作品,未经许可不得转载
先来看看在上一节课中做的练习,运行下方的代码:

<!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:10pxpadding: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-toppadding-rightpadding-bottompadding-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是等效的。
练习
7/12
http://localhost/