css-子div设置margin-top后，父div与子div一起下移

根据海玉的博客

这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

再说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。

所以解决办法：给父div设置border-top或者padding-top。

http://www.hicss.net/do-not-tell-me-you-understand-margin/

时间： 2024-10-12 10:57:43

css-子div设置margin-top后，父div与子div一起下移的相关文章

div设置为inline-block后，两个div之间有空隙

一. 问题: 如题所描述,div设置为inline-block后,产生如下现象: 二. 解决办法: div之间不要换行不要留空格,写成这种: <div class="parent"> <div class="left">左侧</div><div class="right">右侧</div> </div> 父元素的font-size:0:再给子div设置一个font-size

多线程创建子父线程保证一件事子线程执行三次后父线程执行5次循环10次

package Thread; /** * 创建子父线程保证一件事子线程执行三次后父线程执行5次循环10次 * 父线程main线程则为Console台项目的主线程 * 在main线程中调用了start线程则为子线程 * */ public class FatherAndSonTest { public static void main(String[] args) { final FatherAndSon fs = new FatherAndSon(); new Thread(new R

“display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法

摘自:http://www.xuebuyuan.com/825857.html 最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~ 可是当我在中间的span写上文字的时候,神奇的事情发生了: 是的,写上字的那个span掉下来了,掉落,排版错位,很恶心的东西!使用Chrome的开发者工具查看,css和盒模型没有半点问题,郁闷中-- 仔细观察发现,掉落的高度貌似跟文

子元素设置margin-top影响到父级的原因及办法

本人在学HTML+CSS,在设计一个静态网页时发现,当我给子div设置一个margin-top的属性,结果父级也跟着动,找了许多原因无果,一开始想到的是会不会</div>没裹上,但是不是,我一直用的代码补全,一对的完整的打,而且还检查过. 然后又想到可能用了浮动,但是也没有,就只能去网上找,找了后看了一篇文章,瞬间启发我了,因为我给孙级别div做浮动的时候没有做浮动清除,所以我给那个父级了一个清除浮动的属性,然后就能好好玩了,真棒原文地址:https://www.cnblogs.com/xf

css 奇淫技巧行内快父级padding 子级margin 抵消

学了这么久,其实都是在学css3 html5 然后js很薄弱,趁着有时间,更一个新手不懂的,且很好用的css. 行内快的padding在html布局中很常用,但是你知道父级的padding 子级可以通过margin 抵消掉吗?通过这种应用我们可以做到很多事情. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link

子元素设置浮动样式，父元素高度为0

子元素如果设置了浮动样式,那么它就会脱离文档流,从而导致父元素高度变成0,当然不能说这是一个Bug,float的出现的初衷就是为了实现文字环绕图片来实现图文混排和流式布局,所以只能说这种情况只能是由于浮动样式的特性决定的. 测试用例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

bootstrap在reset.css文件中设置margin为0，因此其他的标签需要重新设计margin。

1.h <h>标签和普通使用方法一样. 定义了.h1~.h6六个类名,样式和标题样式一样. 副标题用<small>标签指出,必须包含在h标签内. <h1>Bootstrap标题一</h1> <div class="h1">Bootstrap标题一</div> <h1>Bootstrap标题一<small>我是副标题</small></h1> 2.p 定义<bod

子div margin-top bottom转移到父div

嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&

【Flex】子元素设置百分比高度生效的解决方法

一.问题描述: 当使用Flex布局时,子元素设置百分比高度后,如下图没有效果: 二.解决方法: 父元素必须设置高度,效果如下图: 三.完整代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi

margin top 无效

常出现两种情况: (一)margin-top失效两个层box1和box2,box1具有浮动属性,box2没有,这时候设置box2的上边距margin-top没有效果. 解决办法: 1.box2增加float属性 2.box1与box2之间增加一层"<divstyle="clear:both;"></div>" (二)子元素设置margin-top作用于父容器当给box2设置margin-top时,在FF下仅作用于父容器. 解决办法: 1.