您的位置：首页 > 网站优化 > css  >  css父元素与子元素之间的margin-top问题

css父元素与子元素之间的margin-top问题

 更新时间：2016年9月14日 14:19  点击：1552
margin-top在不同浏览器中的表现是不一样的，很多朋友会发现有一些小区别了，下面我们来看一篇关于css父元素与子元素之间的margin-top问题分析与解决办法整理。

父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。
 
html代码：

<div class="box1">
<div class="box2"></div>
</div>

css样式：

.box1{height:200px;width:200px;background:gray;}
.box2{height:100px;width:100px;background:gold;margin-top:50px;}

解决方法：

1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
2、为父元素添加overflow：hidden；样式即可（完美）
3、为父元素或者子元素声明浮动（float：left；可用）
4、为父元素添加border（border:1px solid transparent可用）
5、为父元素或者子元素声明绝对定位


在某些浏览器中，当给层内元素设置margin-top时，层内元素并没有margin，而是父层出现了margin-top，这往往让人很费解吧。。

解决办法有：

1.给父层添加：overflow:hidden;
2.给父层添加：border除none以外的属性
3.给父层添加：padding-top代替margin-top的效果。

[!--infotagslink--]

相关文章

  • jQuery实现HTML元素隐藏和显示

    这篇文章主要为大家详细介绍了jQuery实现HTML元素隐藏和显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-08-19

  • js屏蔽F12审查元素，禁止修改页面代码等实现代码

    有时候我们需要屏蔽客户端的F12，以防菜鸟也可以随意修改我们的代码，也处于源码的保护等操作，这里就为大家分享一下常见的代码...2020-10-03

  • C++如何删除map容器中指定值的元素详解

    map容器是C++ STL中的重要一员，删除map容器中value为指定元素的问题是我们经常与遇到的一个问题，下面这篇文章主要给大家介绍了关于利用C++如何删除map容器中指定值的元素的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。...2020-04-25

  • javascript中去除数组重复元素的实现方法【实例】

    下面小编就为大家带来一篇javascript中去除数组重复元素的实现方法【实例】。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧...2016-04-16

  • Javascript循环删除数组中元素的几种方法示例

    这篇文章主要给大家介绍了关于Javascript循环删除数组中元素的几种方法，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。...2017-05-22

  • c#实现获取字符串阵列中元素最长或最短的长度

    下面小编就为大家分享一篇c#实现获取字符串阵列中元素最长或最短的长度方法，具有很好的参考价值，希望对大家有所帮助...2020-06-25

  • 利用JS十分钟判断数组中存在元素的多种方式

    这篇文章主要给大家介绍了关于利用JS十分钟判断数组中存在元素的多种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-05

  • 利用python查看数组中的所有元素是否相同

    这篇文章主要给大家介绍了关于如何利用python查看数组中的所有元素是否相同的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-08

  • js获取隐藏元素宽高的实现方法

    下面小编就为大家带来一篇js获取隐藏元素宽高的实现方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-05-20

  • JavaScript实现获取某个元素相邻兄弟节点的prev与next方法

    这篇文章主要介绍了JavaScript实现获取某个元素相邻兄弟节点的prev与next方法,涉及JavaScript基于函数的判定及调用previousSibling与nextSibling的相关技巧,需要的朋友可以参考下...2016-01-26

  • c#实现从字符串数组中把数字的元素找出来

    下面小编就为大家分享一篇c#实现从字符串数组中把数字的元素找出来的方法，希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25

  • JS动态创建元素的两种方法

    这篇文章主要为大家详细介绍了JS动态创建元素的两种方法,字符串拼接形式，或是使用Document、Element对象自带的一些函数 ，需要的朋友可以参考下...2016-04-22

  • python 中dict的元素取值操作

    这篇文章主要介绍了python 中dict的元素取值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-10

  • python实现删除列表中某个元素的3种方法

    这篇文章主要介绍了python实现删除列表中某个元素的3种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-04-27

  • Python过滤序列元素的方法

    这篇文章主要介绍了Python过滤序列元素的方法，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-31

  • php 删除数组最后一个元素 array_pop()函数用法

    删除数组中一个元素我们是最常见的了，今天只简单的介绍一下关于删除最后一个元素哦，如果想删除数组中的任意一个，可以利用我第二种方法，再加个if(){ unset()}就可以实现了...2016-11-25

  • ASP.NET对HTML页面元素进行权限控制(一)

    界面每个元素的权限也是需要控制的。比如一个查询用户的界面里面有查询用户按钮，添加用户按钮，删除用户按钮，不同的角色我们得分配不同的权限...2021-09-22

  • Asp.net mvc在view中用C#代码动态创建元素

    这篇文章主要给大家介绍了关于Asp.net mvc如何在view中用C#代码动态创建元素的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧...2021-09-22

  • php array_unshift 向数组加入元素

    php array_unshift 向数组加入元素 array_unshift() 函数在数组开头插入一个或多个元素。 array_unshift(array,value1,value2,value3...) array 必需。规定输入的...2016-11-25

  • 浅析jquery数组删除指定元素的方法:grep()

    下面小编就为大家带来一篇浅析jquery数组删除指定元素的方法:grep()。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-05-20