精华内容
下载资源
问答
  • 外边距

    2019-10-11 20:08:28
    1.外边距指的是当前盒子与其他盒子之间的距离,它不会影响可见框的大小,但是会影响到盒子的位置,盒子也有4个方向的外边距。 margin-xxx(top/bottom/left/right) 2.eg.margin-top指的是盒子的上外边距,盒子的上边...

    1.外边距指的是当前盒子与其他盒子之间的距离,它不会影响可见框的大小,但是会影响到盒子的位置,盒子也有4个方向的外边距。
    margin-xxx(top/bottom/left/right)
    2.eg.margin-top指的是盒子的上外边距,盒子的上边距和其他盒子的距离。
    由于页面中的元素都是靠左靠上摆放的,当我们设置上和左外边距时,会导致盒子自身的位置发生改变,如果设置右和下外边距会改变其他盒子的位置。
    3.取值可以为负值,负值往相反方向,eg margin-left=-20px;在这里插入图片描述
    4.margin还可以设置为auto,一般指定margin-left/margin-right为auto会将默认值设为最大值,垂直方向设置auto默认为0.
    在这里插入图片描述
    在这里插入图片描述
    如果将left和right同时设置为auto,则将两侧的外边距设置为相同的值,使子元素在父元素中水平居中。
    在这里插入图片描述

    在这里插入图片描述
    5.简写属性:
    margin:10px 20px 30px 40px;规则同之前的上右下左。
    eg margin:0 auto;上下是0,左右是居中。

    展开全文
  • CSS 外边距

    千次阅读 2021-03-25 18:47:35
    CSS 外边距

    CSS 外边距

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 外边距(margin) margin属性用于设置外边距,即控制盒子和盒子之间的距离。用法与padding一样。 外边距的典型应用(外边距可以让块级盒子水平居中,但是必须满足两个条件:) 1.盒子必须指定了宽度(width) 2....

    外边距(margin)

    margin属性用于设置外边距,即控制盒子和盒子之间的距离。用法与padding一样。

    外边距的典型应用(外边距可以让块级盒子水平居中,但是必须满足两个条件:)

    • 1.盒子必须指定了宽度(width)
    • 2.盒子左右的外边距都设置为auto。
    • .header{  width:960px; margin:0    auto;}

    常见的写法,一下三种都可以:

    • margin-left:auto;margin-right:auto;
    • margin:auto;
    • margin:0 auto;

    *****以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加text-align:center;即可。

    外边距合并

     

    • 1.为父元素定义上边框 border:1px  solid transparent;(定义一个透明色边框)
    • 3.直接为父元素添加 overflow:hidden;。

    清除内外边距

     

     

     

     

     

     

     

    展开全文
  • 外边距合并 使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。 相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时如下图,如果上面的元素设置了下外边距margin-bottom,下面的元素设置上...

    外边距合并

    使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。

    相邻块元素垂直外边距的合并

    当上下相邻的两个块元素相遇时如下图,如果上面的元素设置了下外边距margin-bottom,下面的元素设置上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。

    解决方案: 避免就好了。

    嵌套块元素垂直外边距的合并

    对于两个嵌套关系的块元素,如果父元素没有上内边距padding-top及边框border,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。

     

    解决方案:

    1. 可以为父元素定义1像素的上边框或上内边距。

    2. 可以为父元素添加overflow:hidden。

    展开全文
  • 使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。 相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间...
  • CSS 外边距合并

    千次阅读 2021-03-25 19:21:16
    CSS 外边距合并 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
  • CSS中的外边距塌陷(外边距合并)为什么会外边距合并外边距塌陷被设计出来的初衷解决方法 为什么会外边距合并 子元素的margin-top找不到作为参考边界的父元素的border或者padding,就会与父元素的margin-top重叠。 ...
  • 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。CSS margin 属性设置外边距的最简单的...
  • 关于外边距合并(外边距塌陷)的问题 外边距合并的问题分为两大类:相邻块元素垂直外边距的合并以及嵌套块元素垂直外边距的合并 ## 相邻块元素垂直外边距的合并 上面是原理图,反正简单的来说就是相邻垂直的时候...
  • CSS外边距围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性,margin用于设置对象标签之间距离间隔,比如2个上下排列的DIV盒子,我们就...
  • 块级元素的上外边距(margin-top)和下外边距(margin-bottom)有时会合并(或折叠)为一个外边距,其大小取其中的最大者,这种行为称为外边距折叠(margin collapsing),有时也翻译为外边距合并。 发生外边距折叠...
  • 16.解决外边距塌陷——软设问题总结16.1 外边距塌陷1.父子关系的块元素2.兄弟关系的块元素16.2 解决外边距塌陷的方法1.解决父子关系的塌陷2.解决兄弟关系的塌陷 16.1 外边距塌陷 1.父子关系的块元素 如果一方有...
  • 1,父子盒子外边距塌陷 父子关系外边距塌陷的表现是:父盒子和子盒子粘在一起了,当给父盒子设置margin-top时,子盒子跟着父盒子一块下移了。 给子盒子设置margin-top时,父盒子也跟着走。当子盒子和父盒子都设置...
  • 注意:外边距合并问题是发生在给两个块元素设置垂直外边距时(也就是margin-top和margin-bottom) 第一种:两个块元素为兄弟关系 当上下相邻的两个块元素,上边个块有margin-bottom,下边个块有margin-top的时候就...
  • 外边距(margin) margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”, 这段空白通常不能放置其他内容。 margin-top:上外边距 margin-right:右外边距 margin-bottom:下外边距 margin-left:上外边距 ...
  • margin指外边距,是盒子模型的组成之一(盒子=内容+边框+外边距+内边距),类似于表格中的cellspacing,具体用法如下: 一个值时,指定上右下左的外边距 两个值时,第一个值为上下外边距,第二个值为左右外边距 三...
  • 外边距塌陷

    2021-01-09 10:31:20
    外边距塌陷也称为外边距合并,是指两个在正常流中相邻(兄弟或父子关系)的块级元素的外边距,组合在一起变成单个外边距,不过只有上下外边距才会有塌陷,左右外边距不会出现这种问题。 外边距塌陷如何解决? 问题:...
  • 外边距合并问题: 第一种:父子级 第二种:兄弟级
  • 外边距 html中div的外边距和内边距都是什么意思,怎么设html中div的外边距和内边距都是什么意思,怎么设置内边距padding的意思是: 边框与内容之间的距离。 外边距margin的意思是:边框与边框之间的距离。 拓展资料...
  • 外边距合并 使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。 (1). 相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom 下面的元素有上外边距...
  • 外边距合并

    2021-02-24 22:31:39
    外边距合并 以下两种情况会出现外边距合并: 1.垂直相邻的两个盒子,当他们的垂直外边距相遇时,会合并为一个外边距。也叫外边距重叠。 1.1当外边距的数值都为正数时,取数值较大的。 1.2当外边距的数值都是负数时,取...
  • 外边距折叠

    2020-05-27 13:17:23
    文章目录外边距折叠问题外边距折叠的概念普通流概念:外边距折叠的产生条件外边距折叠的结果如何避免外边距折叠 外边距折叠问题 外边距折叠的概念 在CSS中,两个或多个毗邻的普通流中的盒子(可能是父子元素,也可能...
  • 外边距叠加和外边距为负值

    千次阅读 2016-06-23 10:22:57
    盒模型乍一看很简单,无非就是内容、内边距、边框和外边距。但是写起代码来你会发现并不简单,很多地方都很模糊,特别是外边距为负值的时候。 这篇文档主要说明两个问题: 1.外边距叠加 2.外边距为负值 ...
  • 第一种情况: 已知两个宽和高均为100px,margin均为20px的div垂直排列,现象...只有当两个垂直排列的盒子的垂直外边距挨在一起时会产生合并问题,此问题也不需要解决,记住谁的外边距较大就采用谁的外边距就ok了。 ...
  • 上下外边距重叠 如图: 给红色和绿色两个BOX分别设置上外边距和下外边距 .box1{ margin-bottom:100px; } .box2{ margin-top:50px; } 结果如图: 此时发现:两个box之间的实际距离是100px。 原因:浏览器在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,074
精华内容 4,429
关键字:

外边距