CSS样式中padding、border和margin
时间：2010-09-14 来源：qdl2010
盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制页面中各元素的位置。
<head>
<title>CSS样式</title>
</head>
<body>
<div style="border:green 1px solid;padding-bottom:5px;">
<p style="border-top:blue 1px solid;border-bottom:2px dotted blue;padding-bottom:30px;margin-bottom:60px;margin-top:1px;background-color:#E3E3E3">
We can read of things that happened 5,000 years ago in the Near East, where people first learned to write
</p>
<p style="border:red 1px solid;margin-bottom:0px">Next paragraph</p>
</div>
</body>
</html> 浏览效果如下：
1、盒子模型的概念
所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置。
一个盒子模型由content（内容）、border（边框）、padding（间隙）和margin（间隔）这4个部分组成。
<head>
<title>CSS样式</title>
</head>
<body>
<div style="border:green 1px solid;padding-bottom:5px;">
<p style="border-top:blue 1px solid;border-bottom:2px dotted blue;padding-bottom:30px;margin-bottom:60px;margin-top:1px;background-color:#E3E3E3">
We can read of things that happened 5,000 years ago in the Near East, where people first learned to write
</p>
<p style="border:red 1px solid;margin-bottom:0px">Next paragraph</p>
</div>
</body>
</html> 浏览效果如下：
相关阅读 更多 +
