margin的塌陷现象跟合并现象
2017-07-28 19:12
141 查看
emmm,初学html,所以将自己所遇到的问题以及自己的解决方法给写下来。
一、margin上边距造成的塌陷现象
首先给出两个为父子关系的盒子,
当子盒子加上margin-top:50px; 时就出现了问题。
当我们给子盒子加上margin-top:50px; 结果却是父盒子也随着子盒子的移动跟着下来,这叫塌陷现象啦。
如果我们还是需要完成子盒子距离父盒子顶部50px,
可以用两种方法结局
1、给父盒子也就是红色盒子加上内边距padding-top:50px; 这跟原来想要达成的效果一样,但是如果使用padding后不想父盒子的高产生变化就需要把原来的宽高减去50px;
2、也可以选择给父元素加上border,也可以避免塌陷,但设置边框后边框会占据空间,也应减去设置的边框占据的长度。
╮(╯▽╰)╭
一、margin上边距造成的塌陷现象
首先给出两个为父子关系的盒子,
当子盒子加上margin-top:50px; 时就出现了问题。
当我们给子盒子加上margin-top:50px; 结果却是父盒子也随着子盒子的移动跟着下来,这叫塌陷现象啦。
如果我们还是需要完成子盒子距离父盒子顶部50px,
可以用两种方法结局
1、给父盒子也就是红色盒子加上内边距padding-top:50px; 这跟原来想要达成的效果一样,但是如果使用padding后不想父盒子的高产生变化就需要把原来的宽高减去50px;
2、也可以选择给父元素加上border,也可以避免塌陷,但设置边框后边框会占据空间,也应减去设置的边框占据的长度。
╮(╯▽╰)╭
相关文章推荐
- "margin塌陷现象"div盒子嵌套盒子外边距合并现象
- HTML:margin塌陷现象的解决
- margin塌陷现象的解决办法
- 4:--1margin的塌陷现象.html
- margin-top失效 出现吞吃合并现象
- margin-top塌陷现象解决方案
- margin在标准文档流下在竖直方向的塌陷现象。
- css_day04_margin垂直方向的合并现象
- CSS中margin的塌陷现象
- margin塌陷问题与合并问题
- margin的合并现象
- 关于css的margin塌陷现象
- Css中margin塌陷与合并问题与解决办法
- margin塌陷(collapse)
- 清除浮动方法、margin的坍塌现象以及浏览器的某些兼容问题
- 测试音视频合并中存在的问题或现象(thinkvd开发日志)
- 外边距塌陷 margin collapsing
- CSS margin合并问题
- html之解决margin-top塌陷
- css盒子模型 css margin 外边框合并