父元素与子元素之间的margin-top问题(css hack)

ttx9n · 发表于 2013-3-19 16:24:21

给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，遇到此问题的朋友可以参考下本文或许会有意想不到的收获 hack：
父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。

html代码：

复制代码代码如下:
<div class="box1">
<div class="box2"></div>
</div>

css样式：

复制代码代码如下:
.box1{height:200px;width:200px;background:gray;}
.box2{height:100px;width:100px;background:gold;margin-top:50px;}

解决方法：
1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
2、为父元素添加overflow：hidden；样式即可（完美）
3、为父元素或者子元素声明浮动（float：left；可用）
4、为父元素添加border（border:1px solid transparent可用）
5、为父元素或者子元素声明绝对定位

bp5jgbcnt · 发表于 2023-1-21 09:54:57

逛逛看看瞧瞧

溪谷玉贤 · 发表于 2023-4-9 15:48:06

谢谢您的分享！

btbhs8t · 发表于 2023-5-20 23:23:30

天天源码社区www.tiantianym.com

leidie123a · 发表于 2023-9-7 13:48:08

的谁vdvdsvdsvdsdsv

5vulod · 发表于 2023-10-9 01:49:32

撒旦撒旦撒擦擦擦擦

pb_tjc · 发表于 2023-10-20 21:41:58

数据库了多久撒快乐的健身卡啦

dingzhi521 · 发表于 2023-10-27 10:43:27

还不错啊

cxst1h57 · 发表于 2023-10-28 11:10:51

看到这帖子真是高兴！

9jduu05 · 发表于 2023-12-7 15:54:11

的vgdsvsdvdsvdsvds

账号		自动登录	找回密码
密码			立即注册

[CSS] 父元素与子元素之间的margin-top问题(css hack)

相关帖子