New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

margin collapse(外边距塌陷)解决方案 #6

Open

gdutwyg opened this issue Jul 1, 2018 · 0 comments

Labels

css

Owner

gdutwyg commented Jul 1, 2018 •

edited

Loading

父子元素margin collapse(外边距塌陷)

解决的方法有三种：

给父元素设置一个边框，当然可以设置边框为透明;
为父元素添加padding；
为父元素设置overflow:hidden;

兄弟元素margin collapse(margin 取两者最大值)

解决方法：

绝对定位元素
float元素
inline-box元素
给其中一个兄弟元素增加包裹的元素，给这个包裹元素添加overflow : hidden

这些不会和垂直方向上的其他元素margin折叠–其实就是可以生成新的BFC

参考资料

BFC

gdutwyg added the css label

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment