CSS样式表基础（十三）——盒子I
17、CSS盒子模型
CSS将网页中的每一个元素都看作是一个长方形的盒子。这个盒子包括外边距、边框、内边距和元素内容4项。
例：
<html>
<head>
<meta charset = "utf-8">
<title>CSS</title>
<style>
#foo { width: 400px; border: 1px solid #000; }
#bar {
margin: 40px;
padding: 50px;
border: 20px solid #069;
background-color: #cf9;
}
</style>
</head>
<body>
<div id="foo">
<div id="bar">
HTML5网页设计，第1章 网页设计概述，第2章 HTML语言基础，第3章 CSS样式表基础
</div>
</div>
</body>
</html>外层有一个盒子id = “foo”，整个盒子里套了一个盒子id=“bar”装有文本内容，"border: 20px solid #069;"表示边框宽度为20px，颜色为蓝色。“background-color: #cf9;”表示盒子背景色为青绿色。margin和padding两个属性将在下面的博客中介绍。
18、内边距属性 padding
内边距指的是元素边框与元素内容之间的空白区域。
- padding 在一个声明中设置所有内边距属性。
- padding-bottom 设置元素的下内边距。
- padding-left 设置元素的左内边距。
- padding-right 设置元素的右内边距。
- padding-top 设置元素的上内边距。
例：padding: 10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px
例：padding:10px 5px 15px;
上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px
例：padding:10px 5px;
上内边距和下内边距是 10px
右内边距和左内边距是 5px
例：padding:10px;
所有 4 个内边距都是 10px
比亚迪成长空间 168人发布
查看4道真题和解析