css盒子模型:
一个盒子中,盒子中的物体为——content
物体与盒子之间的距离为——padding
盒子本身的边为——border
两个盒子之间的距离为——margin
块级元素——都具有盒模型特征—-也就是,都可以设置margin,padding
下面是定义一个盒子的border:
div{
border:2px solid red;
}
下面是定义一个盒子的宽度,其宽度由padding-left ,
padding-right margin-left ,
margin-right border-left ,
border-right和自己本身物体的宽度组成:
div{
width:200px;
border:1px solid red;
padding:5px;
margin:10px;
} 以上案例中div的宽度为232px;
一个盒子和其他盒子的距离:
div{
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
}
以上代码的结果是此div距离上下左右四个方向的盒子距离都是10px;
其实以上代码也可以缩写为
div{margin:10px;}
div{margin:10px 20px;} //上下为10px 左右为20px