css框模型
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
- 内边距呈现了元素的背景:举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
margin: auto;
background-color: bule;
width: 200px;
height: 200px;
padding: 10px;
border: solid 1px;
}
.div1 h1{
padding: 10px;
}
h2{
padding: 10px ;
}
</style>
</head>
<body>
<div class="div1">
<h1>hello world!</h1>
</div>
<h2>hello world</h2>
</body>
</html>
蓝色部分就是padding定义出的10px
内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置: