1 、上下边距会叠加

    1. !DOCTYPE html>
    2. <html>
    3. <head>
    4. <m<etacharset="UTF-8">
    5. <title></title>
    6. <style>
    7. .box1{
    8. width:500px;
    9. height:300px;
    10. background: blue;
    11. margin-bottom:30px;
    12. }
    13. .box2{
    14. width:300px;
    15. height:100px;
    16. background:#ffff00;
    17. margin-top:30px;
    18. }
    19. </style>
    20. </head>
    21. <body>
    22. <divclass="box1"></div>
    23. <divclass="box2"></div>
    24. </body>
    25. </html>

2、父级包含子级的时候，子级的margin-top会传递给父级,可以使用父级的padding替代自己的margin。
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <metacharset="UTF-8">
    5. <title></title>
    6. <style>
    7. .box1{
    8. width:500px;
    9. height:300px;
    10. background: blue;
    11. }
    12. .box2{
    13. width:300px;
    14. height:100px;
    15. background:#ffff00;
    16. margin-top:30px;
    17. }
    18. </style>
    19. </head>
    20. <body>
    21. <divclass="box1">
    22. <divclass="box2"></div>
    23. </div>
    24. </body>
    25. </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. BZOJ 4025 二分图（时间树+并查集）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4025 [题目大意] 给出一张图,有些边只存在一段时间,问在一个每个时间段, 这张图是否 ...

  2. BZOJ 4059 [Cerc2012]Non-boring sequences（启发式分治）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4059 [题目大意] 一个序列被称为是不无聊的,仅当它的每个连续子序列存在一个独一无二的 ...

  3. 20162312 实验一 Linux基础与Java开发环境

    实 验 报 告 课程:程序设计与数据结构 姓名:张家铖 班级:1623 学号:20162312 实验名称: Linux基础与Java开发环境 实验器材:msi GL62M 7RD 实验目的与要求:1. ...

  4. [POI2010]Divine Divisor

    [POI2010]Divine Divisor 题目大意: 给你\(m(m\le600)\)个数\(a_i(a_i\le10^{18})\).\(n=\prod a_i\).现在要你找到一个最大的\( ...

  5. （原创）Stanford Machine Learning (by Andrew NG) --- (week 9) Anomaly Detection&Recommender Systems

    这部分内容来源于Andrew NG老师讲解的 machine learning课程,包括异常检测算法以及推荐系统设计.异常检测是一个非监督学习算法,用于发现系统中的异常数据.推荐系统在生活中也是随处可 ...

  6. 源码安装python及paramikon的初步试用

    Auth: jin Date: 20140314 OS: CentOS release 5.5 (Final) 默认2.4版本 莫 1.download wget http://www.python. ...

  7. web安全之如何防止CSRF跨站请求伪造

    CSRF(Cross-site request forgery)跨站请求伪造,也被称为“One Click Attack”或者Session Riding,通常缩写为CSRF或者XSRF,是一种对网站 ...

  8. 使用MailKit收发邮件

    .Net BCL库中对于邮件的支持只有SmtpClient一个,它只能进行简单的邮件的发送操作,并且不支持POP3和SMTP,无法接收邮件,用起来有诸多不便. 今天看到园子里有文章(使用 MimeKi ...

  9. 基于TCP通信的客户端断线重连

    转载:http://www.cnblogs.com/networkcomms/p/4304362.html 源码下载 在CS程序中,断线重连应该是一个常见的功能. 此处的断线重连主要指的是服务器端因为 ...

  10. arcgis andriod 点击后变色

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...