margin的塌陷现象跟合并现象
来源:互联网 发布:最新网络电视机 编辑:程序博客网 时间:2024/05/01 00:06
emmm,初学html,所以将自己所遇到的问题以及自己的解决方法给写下来。
一、margin上边距造成的塌陷现象
首先给出两个为父子关系的盒子,
当子盒子加上margin-top:50px; 时就出现了问题。
当我们给子盒子加上margin-top:50px; 结果却是父盒子也随着子盒子的移动跟着下来,这叫塌陷现象啦。
如果我们还是需要完成子盒子距离父盒子顶部50px,
可以用两种方法结局
1、给父盒子也就是红色盒子加上内边距padding-top:50px; 这跟原来想要达成的效果一样,但是如果使用padding后不想父盒子的高产生变化就需要把原来的宽高减去50px;
2、也可以选择给父元素加上border,也可以避免塌陷,但设置边框后边框会占据空间,也应减去设置的边框占据的长度。
╮(╯▽╰)╭
阅读全文
0 0
- margin的塌陷现象跟合并现象
- margin塌陷现象的解决办法
- margin的合并现象
- CSS中margin的塌陷现象
- 关于css的margin塌陷现象
- 4:--1margin的塌陷现象.html
- HTML:margin塌陷现象的解决
- margin-top塌陷现象解决方案
- margin在标准文档流下在竖直方向的塌陷现象。
- margin-top失效 出现吞吃合并现象
- 布局、浮动、塌陷现象
- 关于margin-top 的神奇现象
- CSS中margin的两种现象
- margin的两种特殊现象
- 关于margin重叠现象的解决方案
- margin collapsing现象
- 总结Margin重叠现象
- margin重叠现象
- 属性动画源码分析
- 学前段半个月的一些心得(一)
- mybaties中foreach数据批量更新
- WUST OJ 1677:约会(思维)
- Opencv访问图像像素
- margin的塌陷现象跟合并现象
- 如何获取方法参数的泛型类型
- 1.HTML表单及列表
- 如何使用 PDF EXPERT 压缩 PDF 让PDF文档变?
- IntentService使用小案例
- TabLayout double click 标题回顶部
- java中以JDOM方式来对xml文件进行解析操作
- ASCII码值表
- Git设置记住密码