盒模型——内边距
Posted goodgirl----xiaomei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了盒模型——内边距相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>postion</title>
<style>
.box1{
/*
*使用width来设置盒子内容的宽度
* height来设置盒子内容的高度
* width和height
*/
width:200px;
height:200px;
background: greenyellow;
/*设置边框*/
border:3px red solid;
/*
*内边距（padding）：指定盒子的内容区与盒子边框之间的距离
* 一共有四个方向的内边距，可以通过：
* padding-top
* padding-bottom
* padding-left
* padding-right
* 来设置四个方向的内边距
*
* 内边距会影响盒子可见框的大小，元素的背景会延伸到内边距
* 盒子的大小由内容区、内边距和边框共同决定
* 盒子的可见框的宽度=border-left-width+padding-left+width+padding-right+border-right-width
* .............高度=...........
*/
/*padding:20px;*/
padding:20px 30px 40px;
/*上、右左、下 （顺时针）*/
padding:20px 200px 100px 40px;
/*上、右、左、下*/
padding:20px 200px;
/*上下、左右*/
}
/*创建一个子元素box2来占满box1*/
.box2{
height:100%;
width:100%;
background: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">我是box2</div>
</div>
</body>
</html>
以上是关于盒模型——内边距的主要内容，如果未能解决你的问题，请参考以下文章