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. Windows 下使用 mingw+msys 交叉编译 Android Unity Mono

    对于没有升级到 Unity5.4的用户,发布安卓版本都会有对 C# 脚本进行加密的需求,我们项目在裸奔了很长时间后,决定开始做这件事. 网上查看了很多资料,我很希望直接在 windows 下编译而不去 ...

  2. Linux命令之route

    route [-CFvnNee] [-A family] [-4|-6] route [-v] [-A family] [-4|-6] add [-net|-host] target [netmask ...

  3. CSS页面排版的一点笔记

    CSS页面排版 字体族 字体族的值是一个字体备选列表,多个字体使用英文逗号隔开,字体名称如果有空格则需要引号. font-family: "Georgia Pro", " ...

  4. Python开发基础-Day4-布尔运算、集合

    布尔值 True 真 False 假 所有的数据类型都自带布尔值,数据只有在0,None和空的时候为False. print(bool()) print(bool()) print(bool('')) ...

  5. 【贪心】 Codeforces Round #419 (Div. 1) A. Karen and Game

    容易发现,删除的顺序不影响答案. 所以可以随便删. 如果行数大于列数,就先删列:否则先删行. #include<cstdio> #include<algorithm> usin ...

  6. 【枚举+贪心】POJ2718-Smallest Difference

    [题目大意] 按升序输出几个不同的数字,任意组成两个数字,输出最小的差值. [思路] 虽然是在穷竭搜索的章节里找到的题目,但是我觉得不需要穷竭搜索,枚举一下就可以了,0MS.分为一下三种情况: (1) ...

  7. JS小游戏寻找房祖名

    提示:1:先把两个图片放到重命名并放到相应的路径内. 2:本小游戏只为闲事练手,如有小bug自行解决,解决不了的可以留言,我看到后解决. 代码如下: <!DOCTYPE html>< ...

  8. 转载:通过扩大IE使用内存,解决skyline在IE下模型不能加载的方法

    转自:https://www.cnblogs.com/cannel/p/5261009.html 环境:skyline TerraExploere 6.6,win 10 sp1 64位,ie 11 情 ...

  9. express默认配置文件app.js

    Express路由 Express模块化路由 Express中间件 Express结合jade模板渲染HTML 看完上面的,再回头看这app.js,就应该感觉没什么压力了,主要包含http的创建,基本 ...

  10. 用javac编译整个j2ee项目

    转自:http://www.blogjava.net/zhyiwww/archive/2011/10/13/361145.html 我们做项目,可能会使用ant做系统集成和部署.其实ant在编译项目时 ...