11.css盒子模型-内边距padding
2020-02-17 本文已影响0人
欣博客
内边距（padding），指的是盒子的内容区与盒子边框之间的距离
一共有四个方向的内边距，可以通过：
- padding-top
- padding-right
- padding-bottom
- padding-left
来设置四个方向的内边距
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,
盒子的大小由内容区、内边距和边框共同决定
盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
可见宽的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*设置边框*/
border: 10px red solid;
/*设置上内边距*/
/*padding-top: 100px;*/
/*设置右内边距*/
/*padding-right: 100px;
/*设置下内边距*/
/*padding-bottom: 100px;*/
/*设置下左边距*/
/*padding-left: 100px;*/
/* 简写:上右下左 顺时针顺序设置 padding的大小 */
padding: 10px 20px 30px 40px;
}
/*
* 创建一个子元素box1占满box2
*/
.box2{
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
image.png
