第一个子元素的margin-top和最后一个子元素的margin-bottom越界问题
当父元素没有边框border时，子元素加margin-top（这里以第一个子元素的 margin-top为例），会出现 margin-top加在父元素上的bug。
解决方法有四种：1.给父元素加border。
2.给父元素加padding。
3.给父元素加overflow:hidden。
4.(推荐使用) 给父元素加前置内容生成。
css 四种方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
#parent{
width
:
300px
;
height
:
200px
;
background-color
:yellow;
/*①给父元素加border*/
/*border:1px solid black;*/
/*②给父元素加padding*/
/* padding-top:10px;*/
/*③给父元素加overflow:hidden*/
/*overflow:hidden;*/
/*④ 给父元素加前置内容生成*/
}
#parent:before{
content
:
" "
;
display
:table;
}
#child{
width
:
100px
;
height
:
50px
;
background-color
:
red
;
margin-top
:
50px
;
}
|
这是html页面：
|
1
2
3
|
<
div
id="parent">
<
div
id="child"></
div
>
</
div
>
|