HTML里子DIV设置margin-top后影响父DIV位置的解决办法

在HTML里，子DIV元素设置了margin-top后，在与父元素之间没有任何其他元素的情况下，会影响到父DIV的位置。

一、编写代码。

<!DOCTYPE html>
<html lang="en"><head></head><body>
<div style="width:100%; height:400px;background-color:blue">
<div style="width:80%;height:80%;background-color:white"></div>
</div></body></html>

二、子元素添加margin-top:10%

父DIV元素的位置被影响，上面出现大片空白。

解决：

子DIV或者父DIV里设置float:left;可以使父DIV位置还原。
父DIV设置position: relative;子DIV里设置position: absolute;或者直接在父DIV里设置position: absolute;可以使父DIV位置还原。
父DIV设置border-top: 1px solid;可以使父DIV位置还原。
父DIV设置padding-top代替子DIV设置margin-top。
子DIV设置position: relative;top: 10%;代替margin-top不会使父元素DIV位置发生改变。（注意：position: relative时,top等定位属性是根据元素自身当前位置进行定位，不会改变其他元素位置，容器内只有一个元素的情况下会发现子元素设置定位后不会撑开父容器高度，也就会发生溢出现象。margin属性是在元素占据位置周围补白，会影响其他元素位置）

HTML里子DIV设置margin-top后影响父DIV位置的解决办法相关推荐

子元素的margin-top影响父元素原因和解决办法
这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...
html不能超出div的宽度,DIV设置width后超出父元素应该如何解决
这次给大家带来DIV设置width后超出父元素应该如何解决,解决DIV设置width后超出父元素的注意事项有哪些,下面就是实战案例,一起来看一下. 前言本文介绍的是利用CSS3的新属性box-siz ...
【Win10】系统，手动设置静态IP后出现两个IPv4地址解决方法
@[TOC][Win10]系统,手动设置静态IP后出现两个IPv4地址解决方法 [Win10]系统,手动设置静态IP后出现两个IPv4地址解决方法你好! 这是你第一次使用 Markdown编辑器所 ...
css不换行省略号没作用,flex布局下，css设置文本不换行时，省略号不显示的解决办法...
大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度. a name a info Lorem ipsum dolor sit amet, co ...
表单input中disabled提交后得不到值的解决办法
转载自:http://blog.csdn.net/u014185140/article/details/51985147 input的字段当为diabled时时无法获取数值得,所以最近不要用这个,我们 ...
apache 安装后默认主页无法打开_CAD教程：CAD软件打开图纸后钢筋符号无法读取的解决办法...
设计师在日常绘图工作中经常会用CAD软件打开其他人发送过来的结构图纸,图纸打开后有些时候会出现钢筋符号显示为问号的情况.那么作为一名CAD遇到这种状况该如何解决呢?小编仔细研究了一下发现大致情况分为两 ...
vm虚拟机安装系统后出现operating system not found解决办法（VM装ghost 不能进系统的解决方法）
vm虚拟机安装系统后出现operating system not found解决办法不知你使用那种软件分的区? 用DIANGEN的话,它本来就清楚列明了激活分区选项的. 如果用PQ分区的话,还必须 ...
关于修改WIFI代理后手机部分APP无法使用的解决办法
关于修改WIFI代理后手机部分APP无法使用的解决办法最近在练习爬虫抓取手机app数据时出现了一个问题,就是修改wifi代理,使用fiddler代理时,使用斗鱼app显示无法连接到服务器,在网上搜索 ...
电脑用计算机软件一直闪退,电脑软件打开后闪退或崩溃的解决办法
原标题:电脑软件打开后闪退或崩溃的解决办法电脑闪退的因素很多,除了跟用户自身操作失误有关外,也和电脑软硬件有很大关系,例如病毒.木马程序的破坏,使用了测试版和盗版软件,软件本身存在bug,软件和系统 ...

HTML里子DIV设置margin-top后影响父DIV位置的解决办法

HTML里子DIV设置margin-top后影响父DIV位置的解决办法相关推荐

最新文章

热门文章