解决:子div设置margin-top使得父div也跟着向下移动
来源:互联网 发布:c语言中大小写字母转换 编辑:程序博客网 时间:2024/06/03 19:33
之前在写网页的时候,发现一个小问题,就是子div设置margin-top的时候,父的div也会跟着向下移动。我用代码和图描述一下问题:
<style> *{margin:0;padding:0;} .div1{background:green;height:100px;} .div2{background:darkblue;height:100px;} .subDiv{background:red;height:40px;}</style><body><div class="div1"></div><div class="div2"> <div class="subDiv"></div></div></body>
效果是:
红色div是蓝色div的子div。然后我设置红色div的margin-top为20px;
结果如下:
可以看到,设置margin-top之后,父div跟着子div向下移动了。(白色层为空白处,非div层)
解决这个问题的方法是,为父div设置border。为此,我为父div设置border-top:1px solid darkblue;
结果显示:
可以看到,子div向下移动了,但是父div并没有向下移动。
网上找到的原理:
一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
虽然可以通过给父div添加border可以解决问题,但是总觉得不太好。每次为了实现这样的效果而设置border-top,好像有点累赘。后来在网上看了一些博文,觉得很不错。大概的意思是:margin是用于隔开两个独立元素,而padding用域隔开元素及其元素内部内容。其实子div相当于父div的内容,为了使元素和内容隔开,可以使用padding。
于是,我在父div里面设置了padding-top,也达到了目的。
本文仅作为笔记记录。
W3C的CSS教程:
http://www.w3school.com.cn/css/css_margin_collapsing.asp
网上相关博文:
http://www.hicss.net/do-not-tell-me-you-understand-margin/
- 解决:子div设置margin-top使得父div也跟着向下移动
- 如何解决子div设置margin-top时影响父div的margin-top
- 子DIV设置margin-top影响父DIV位置
- css-子div设置margin-top后,父div与子div一起下移
- CSS常见问题解决001——子div的margin-top影响父div的位置
- 子DIV块中设置margin-top时影响父DIV块位置的解决办法
- 子DIV设置margin-top影响父DIV位置的解决办法
- 子DIV块中设置margin-top时影响父DIV块位置的解决办法
- 子DIV块中设置margin-top时影响父DIV块位置的解决办法
- 子DIV块中设置margin-top时影响父DIV块位置的解决办法
- 子div块中设置margin-top时影响父div块位置的解决办法及其原因
- 子div块中设置margin-top时影响父div块位置的解决办法及其原因
- 子div 的margin-top不生效
- 子元素设置margin-top,父元素也受影响
- 子元素设置margin-top,父元素也受影响
- div margin-top不起作用
- 子div的margin影响父div
- 父DIV padding和子DIV margin
- 常见排序算法C++实现
- C语言学习之时钟函数clock()函数
- linux命令之----fdisk命令-磁盘分区管理工具
- 加密工具类
- eclipse热键(转载)
- 解决:子div设置margin-top使得父div也跟着向下移动
- Two Sum II
- pcie 对rc操作的ops
- Java基础知识(待更新)
- [leetcode]11. Container With Most Water
- java中equals和==的区别
- 炼数成金Python网络程序开发教程
- 最小生成树
- JavaScript新创建对象的一些属性和方法