尺寸属性


尺寸属性是用于设置HTML元素的宽度和高度的属性

尺寸属性的单位一般为像素或百分比


#wrapper{
width:100px;
height:100px;
background-color:#f00;
}
<div id="wrapper"></div>


可以设置尺寸属性的HTML元素

块级对象

-p

-div

-h1，h2，h3，h4，h5，h6

-ul，ol，li，dl，dt，dd

存在width、height属性的HTML元素

-img

-table

表单控件

如单行文本框、密码框、列表框、多行文本框等


外边距

围绕在元素边框的空白区域是外边距

外边距是透明的


#logo{
width:100px;
height:100px;
border:2px solid #f00;
margin-bottom:10px;
}
#banner{
width:100px;
height:80px;
border:2px solid #0f0;
}
<div id="logo"></div>
<div id="banner"></div>


外边距属性

margin-top，可是设置上侧外边距

如果将top修改为right，bottom，left，即可以设置右侧、底部和左侧外边距

外边距的属性值可能为px，百分比或自动

外边距可以为负值


默认情况下，一下HTML块级元素都存在外边距

-body

-h1、h2、h3、h4、h5、h6

-p

快速清除块级元素外边距

body,p,div,h1,h2,h3,h4,h5,h6,pre,blockquote{margin:0}


外边距的简洁写法

外边距的简洁写法有一下几种：

- margin:value（四个方向相同）

- margin:value（上下） value（左右）

- margin:value（上） value（左右） value（下）

- margin:value（上） value（右） value（下） value（左）


外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上或下外边距也会发生合并

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距碰到了一起，他们会发生合并（只有普通文档流中块级元素的垂直外边距才会发生外边距合并）


内边距


内边距是元素边框与元素内容之间的空白区域

内边距可以通过padding属性进行设置

内边距属性可以为像素，百分比，但不能为负数


#content{
width:200px;
height:100px;
border:2px solid #900;
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;
}
<div id="content"></div>


内边距的简洁写法

内边距的简洁写法有一下几种：

- padding:value（四个方向相同）

- padding:value（上下） value（左右）

- padding:value（上） value（左右） value（下）

- padding:value（上） value（右） value（下） value（左）