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