以下属性都有上下左右四个方向:
内边距:padding
外边距:margin
边框:border
1.边框
盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
div{border:2px solid red;}
等同于
div{
border-width:2px;
border-style:solid;
border-color:red;
}
注:
(1)border-style(边框样式)常见样式有:
dashed(虚线)| dotted(点线)| solid(实线)。
(2)border-color(边框颜色)中的颜色可设置为十六进制颜色,如:
border-color:#888;//前面的井号不要忘掉。
(3)border-width(边框宽度)中的宽度也可以设置为:
thin | medium | thick(但不是很常用),最常还是用象素(px)。
2.为标签单独设置单方向边框
标签{border-bottom:1px solid red;}
3.填充
div{padding:20px 10px 15px 30px;}
等同于
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}-----------顺时针
如果上、右、下、左的填充都为10px,可为:div{padding:10px;}
如果上下填充一样为10px,左右一样为20px,可为:div{padding:10px 20px;}
4.外边距
div{margin:20px 10px 15px 30px;}
等同于
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}-----------顺时针
如果上、右、下、左的填充都为10px,可为:div{margin:10px;}
如果上下填充一样为10px,左右一样为20px,可为:div{margin:10px 20px;}