子元素的margin-top作用于外层父元素解决方法

子元素的margin-top作用于外层父元素解决方法:
有时候在设置子元素的margin-top属性的时候,本来是要作用于父元素,但是表现的结果却是父元素具有了margin-top效果,下面就通过代码实例介绍一下如何解决此问题。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#box{
  width:200px;
  height:200px;
  background:red;
  overflow:hidden;
}
#main{
  width:50px;
  height:50px;
  background:blue;
  margin-top:50px;
}
</style>
<body>
<div id="box">
  <div id="main"></div>
</div>
</body>
</html>

上面代码实现了我们的要求,其实这个就是典型的外边距合并问题,添加overflow:hidden即可消除此现象,这里就不多介绍了,具体可以参阅margin外边距合并详解一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12696

更多内容可以参阅:http://www.softwhy.com/divcss/

时间: 2024-10-07 17:03:53

子元素的margin-top作用于外层父元素解决方法的相关文章

[ jquery 过滤器 parents(expr) ] 此方法用于在选择器的基础之上搜索被选元素沿着父元素链找到符合参数的那个父元素,完成需求,如果没有参数,他会一直沿着父元素链解析到 html 标签

取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素 "!DOCTYPE html").可以通过一个可选的表达式进行筛选 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords

jQuery获取元素上一个、下一个、父元素、子元素

jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(expr),返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点 jQuery.contents

垂直居中——父元素高度确定的单行文本、父元素高度确定的多行文本

声明:来自http://www.imooc.com/learn/9 学习 父元素高度确定的单行文本的竖直居中 是通过设置父元素的 height 和 line-height 高度一致来实现的. .container{ height:100px; line-height:100px; background:#999; } 父元素高度确定的多行文本 使用插入 table (包括tbody.tr.td)标签,同时设置 vertical-align:middle. <body> <table>

hive中创建子表并插入数据过程初始化MR报错解决方法

本文继成上一篇通过hive分析nginx日志文章,详情参考下面链接: http://www.cnblogs.com/wcwen1990/p/7066230.html 接着来: 创建业务子表: drop table if exists chavin.nginx_access_log_comm; create table if not exists chavin.nginx_access_log_comm( host STRING, time STRING, request STRING, refe

WinForm MDi子窗体最大化导致子窗体标题栏和主窗体菜单栏合并问题的解决方法

在主窗体菜单栏的ItemAdded事件中编写如下代码: *msMain是我的主窗体菜单栏的Name属性值 //子窗体最大化不显示图标 private void msMain_ItemAdded(object sender, ToolStripItemEventArgs e) { if (e.Item.Text.Length == 0) { e.Item.Visible = false; } else { e.Item.Visible = true; } } 说明: 打开的子窗体最大化的时候,菜单

margin折叠-从子元素margin-top影响父元素引出的问题

正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! html代码: <div id="fatherbox"> <div id="childbox">首页 </div> </div> css样式: #fatherbox{width:100%,height:64px;back

为什么子元素设置margin-top会作用在父元素上?

原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> html * { margin:0; padding: 0; } </style> <body> <

父元素如何围住浮动子元素

当元素使用float属性,将脱离文档流,因此父元素便不会包围它. <section> <div class="左栏"> 我是左栏 我是左栏 我是左栏 我是左栏 </div> <div class="右栏"> 我是右栏 </div> </section> <footer>我是页脚</footer> CSS样式如下: section{ border: 1px solid #3

子元素要绝对定位时,父元素应该怎么办?

昨天做练习时,遇到了这个问题: 如果子元素设置绝对定位(absolute),父元素需要设置相对定位(relative),否则子元素就不知道会飘到哪去了. 但总觉得还是没搞清楚,就去百度了,得到了一些见解,以下: 一.表 实现子元素在父元素中的绝对定位必须满足以下两个条件: 1.父元素要有相对定位属性(position:relative), 2.子元素设置绝对定位(position:absolute),并且同时加四个方向(top,bottom,left,right)的任意方向的属性值 <!DOCT