1 、上下边距会叠加

  1. !DOCTYPE html>
    <html>
    <head>
    <m<etacharset="UTF-8">
    <title></title>
    <style>
    .box1{
    width:500px;
    height:300px;
    background: blue;
    margin-bottom:30px;
    }
    .box2{
    width:300px;
    height:100px;
    background:#ffff00;
    margin-top:30px;
    }
    </style>
    </head>
    <body>
    <divclass="box1"></div>
    <divclass="box2"></div>
    </body>
    </html>

2、父级包含子级的时候,子级的margin-top会传递给父级,可以使用父级的padding替代自己的margin。
  1. <!DOCTYPE html>
    <html>
    <head>
    <metacharset="UTF-8">
    <title></title>
    <style>
    .box1{
    width:500px;
    height:300px;
    background: blue;
    }
    .box2{
    width:300px;
    height:100px;
    background:#ffff00;
    margin-top:30px;
    }
    </style>
    </head>
    <body>
    <divclass="box1">
    <divclass="box2"></div>
    </div>
    </body>
    </html>

3、margin左右
margin-lefta:uto     偏右
margin-right:auto       偏左
margin:auto      水平居中
 
    



margin外边距问题的更多相关文章

  1. 为什么margin-top不是作用于父元素【margin外边距合并问题】

    coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...

  2. CSS Margin(外边距)

    CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...

  3. CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

    盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...

  4. CSS:CSS margin(外边距)

    ylbtech-CSS:CSS margin(外边距) 1.返回顶部 1. CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围 ...

  5. 关于margin外边距合并的问题

    一 .兄弟元素margin外边距合并演示   当两个垂直方向相邻的兄弟元素都为常规流块盒,他们之间垂直方向的外边距不是两者之和,而是取两者中的最大值.这种现象被称为相邻的兄弟元素垂直方向外边距合并. ...

  6. padding(内边距)、margin(外边距)、border(边框)

    元素的 padding 控制元素内容 content和元素边框 border 之间的距离. 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,如果你将一个元素的 mar ...

  7. margin外边距属性

    外边距属性: 设置元素与元素之间的距离(外边距),4个方向(上右下左). margin:长度值|百分比|auto margin-top margin-right margin-bottom margi ...

  8. CSS margin 外边距 属性的位置关系

    padding:内边距 margin :外边距 margin:10px; 所有 4 个外边距都是 10px ******************************************* ma ...

  9. Margin外边距叠加

    外边距(Margin)叠加 只有普通文档流中块级元素(块框)的垂直外边距才会发生外边距叠加.行内框.浮动框和绝对定位框之间的外边距不会叠加 两个相邻兄弟块框 父元素与子元素,并 父元素没有内边距或边框 ...

  10. android 国际化 横屏(land) 竖屏(port)margin外边距和padding内边距

    android 国际化 横屏(land) 竖屏(port) 边距又分为内边距和外边距,即margin和padding.

随机推荐

  1. SGU167 I-country

    嗯以前在某个DP专题了发过这道题,但是当时没码代码,现在重发一篇题解 思考阶段如何划分:由已经处理的行数向下扩展,但是仅有行数我们无法描述状态空间那我们再加入已经选过的格子数,这样我们似乎可以确定我们 ...

  2. 线性基【CF845G】Shortest Path Problem?

    Description 给定一张 \(n\) 个点 \(m\) 条边的无向图,一开始你在点 \(1\),且价值为 \(0\) 每次你可以选择一个相邻的点,然后走过去,并将价值异或上该边权 如果在点 \ ...

  3. 【BZOJ 1053】 1053: [HAOI2007]反素数ant (反素数)

    1053: [HAOI2007]反素数ant Description 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4.如果某个正整数x满足:g(x)>g(i) 0&l ...

  4. 【20181019T3】比特战争【最小生成树思想】

    题面 [错解] Hmm不可做啊 要不按b排个序? 然后并查集瞎搞,刷刷刷过了样例 然后大样例大了几万倍 出了组小数据,Successful Hack 弃疗 水过10分 [正解] 用占领的边将顶点连起来 ...

  5. 泛型类Bag

    课堂练习--泛型类Bag 要求: 0.代码运行在命令行中,路径要体现学号信息,IDEA中,伪代码要体现个人学号信息 1.参见Bag的UML图,用Java继承BagInterface实现泛型类Bag,并 ...

  6. [转] FileSystemXmlApplicationContext、ClassPathXmlApplicationContext和XmlWebApplicationContext简介

    今天在用Spring时遇到一个问题,提示找不到applicationContext.xml文件.原来是在加载这个文件时调用的方法不太合适,所以造成了程序找不到项目下的xml配置文件. 我们常用的加载c ...

  7. Distinctive Image Features from Scale-Invariant Keypoints(个人翻译+笔记)-介绍

    Distinctive Image Features from Scale-Invariant Keypoints,这篇论文是图像识别领域SIFT算法最为经典的一篇论文,导师给布置的第一篇任务就是它. ...

  8. NHibernate之一级缓存(第十篇)

    NHibernate的一级缓存,名词好像很牛B,很难.实际上就是ISession缓存.存储在ISession的运行周期内.而二级缓存则存储在ISessionFactory内. 一.ISession一级 ...

  9. Android 自己收集的开源项目集合(持续更新 2018.2.5)

    2017.12.21 1.仿QQ说说发图片选择框架 https://github.com/yaozs/ImageShowPicker 2.炫酷开屏动画框架 https://github.com/Jos ...

  10. [转]SSIS Recordset Destination

    本文转自:http://www.sqlis.com/sqlis/post/Shredding-a-Recordset.aspx Doing what to a recordset? Shredding ...