精华内容
下载资源
问答
  • 1,父子盒子外边距塌陷 父子关系外边距塌陷的表现是:父盒子和子盒子粘在一起了,当给父盒子设置margin-top时,子盒子跟着父盒子一块下移了。 给子盒子设置margin-top时,父盒子也跟着走。当子盒子和父盒子都设置...

    1,父子盒子外边距塌陷
    父子关系外边距塌陷的表现是:父盒子和子盒子粘在一起了,当给父盒子设置margin-top时,子盒子跟着父盒子一块下移了。 给子盒子设置margin-top时,父盒子也跟着走。当子盒子和父盒子都设置margin-top时,哪个值大,就按照哪个值。
    塌陷原因:父子盒子公用一个外边距区域。
    解决办法:
    1,给父盒子设置边框或内边距
    2,给父标签添加overflow:hidden属性,触发BFC规则(块级格式上下文,把父级渲染成一个独立区域。)
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            .wrap {
                width: 500px;
                height: 500px;
                background-color: yellowgreen;
                /* margin-top: 30px; */
                /* border: 1px solid transparent; */
                /* 给父盒子设置1像素的透明边框 ,能解决外边距塌陷问题*/
                /* padding: 1px; */
                /* 给父盒子设置内边距,掘金外边距塌陷问题 */
                overflow: hidden;
                /* 给父盒子设置 overflow: hidden;,掘金外边距塌陷问题 */
            }
            
            .box1 {
                width: 200px;
                height: 200px;
                background-color: blue;
                margin: auto;
                margin-top: 20px;
            }
        </style>
    </head>
    
    <body>
        <!-- 父子关系外边距塌陷的表现是:父盒子和子盒子粘在一起了,当给父盒子设置margin-top时,子盒子跟着父盒子一块下移了。 给子盒子设置margin-top时,父盒子也跟着走。当子盒子和父盒子都设置margin-top时,哪个值大,就按照哪个值。 -->
    
        <div class="wrap">
            <div class="box1">
    
            </div>
        </div>
    </body>
    
    </html>
    

    2,兄弟关系的外边距塌陷
    现象:上一个盒子设置下外边距,下一个盒子设置上外边距,都只会显示其中的最大边距值。
    也就是说如果其中有一个盒子的边距设置的小于另一个盒子,就会被覆盖了。
    兄弟关系外边距塌陷的原因:上下两个兄弟关系的盒子公用一个外边距区域。
    解决方法:给这两个盒子都套一个父盒子,父盒子添加overflow:hidden属性。
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
                width: 200px;
                height: 200px;
            }
            
            .box1 {
                background-color: yellow;
                margin-bottom: 20px;
            }
            
            .box2 {
                background-color: red;
                margin-top: 20px;
            }
            
            .wrap {
                overflow: hidden;
            }
        </style>
    </head>
    
    <body>
        <div class="wrap">
            <div class="box box1"></div>
        </div>
        <div class="wrap">
            <div class="box box2"></div>
        </div>
    
    </body>
    
    </html>
    
    展开全文
  • CSS/HTML外边距的叠加问题

    千次阅读 2017-10-29 17:13:22
    在讨论外边距的叠加之前需要先声明:只有普通文档流中块元素的垂直外边距才会发生外边距叠加,涉及行内框,浮动框,绝对定位框的情况下外边距不会叠加。 1.当两个以及两个以上元素处于相对上下位置(且)时,上面...

    外边距的叠加有3种情况:

            在讨论外边距的叠加之前需要先声明:只有普通文档流中块元素的垂直外边距才会发生外边距叠加,涉及行内框,浮动框,绝对定位框的情况下外边距不会叠加。

    1.当两个以及两个以上元素处于相对上下位置(且)时,上面元素的下外边距和下面元素的上外边距会发生叠加,最终的显示结果为两个外边距中较大的一个,如果相等则合为一个显示。(即使加了内边距和边框也不能阻止叠加)。

    测试代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>外边距叠加问题</title>
        <style type="text/css">
        *{ padding: 0;   margin: 0;  }
        .top{
            background-color: pink;
            margin-bottom: 50px; 
        }
        .bottom{
            background-color: blue;
            margin-top: 50px;
        } 
        </style>
    </head>
    <body>
        <p class="top">the top</p>
        <p class="bottom">the bottom</p>
    </body>
    </html>

    2.一个包含在另一个元素内的元素,如果外部元素没有内边距或有边框将内容区与外边距分隔开,   那么内部元素的外边距和外部元素的外边距发生叠加,最终表现为两者中较大的一个做为实际外边距(例如只设置了上外边距的内部元素的顶部只能和外部元素的上边缘紧邻着,内部元素的外边距体现在外部元素与他们整体之外的元素的上外边距),  这是一种很奇怪的一个效果,但是如果给外部元素加上边框或者内边距(注意是外部元素),就不会有叠加情况了。

    测试代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>外边距叠加问题</title>
        <style type="text/css">
        *{  padding: 0; margin: 0; }
        .outer{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .inner{
            width: 100px;
            height: 100px;
            margin-top: 50px;
            background-color:red;
        }
        </style>
    </head>
    <body> 
        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>
    </html>

    3.空元素的叠加:对于一个空元素如果设置了上外边距和下外边距那么他们就会发生叠加,结果为两者中值较大的一个外边距,若相等则合并为一个,如果再遇到其他外边距会继续叠加。

    测试代码:结果在浏览器的开发者查看器里找到该空元素查看其实际外边距大小。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>外边距叠加问题</title>
        <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .void{
            margin-top: 50px;
            margin-bottom: 20px;
        }
        </style>
    </head>
    <body>
        <p class="void"></p>
    </body>
    </html>

    ——————————————

    来自初学者的总结/记录,若有不对,还望指教

    展开全文
  • 展开全部1、padding-top 属性:设置 p 元素的上内边32313133353236313431303231363533e58685e5aeb931333431373332,该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算,因此,如果一...

    展开全部

    1、padding-top 属性:设置 p 元素的上内边32313133353236313431303231363533e58685e5aeb931333431373332距,该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算,因此,如果一个元素既有内边距又有背景,从视觉上看可能延伸到其他行,有可能还会与其他内容重叠。不允许指定负内边距值。

    2、padding-right 属性:设置元素右内边距(空白)。该属性设置元素右内边距的宽度。行内非替换元素上设置的右内边距仅在元素所生成的第一个行内框的右边出现.

    3、padding-bottom 属性:设置元素的下内边距(底部空白)。该属性设置元素下内边距的宽度。行内非替换元素上设置的下内边距不会影响行高计算,因此,如果一个元素既有内边距又有背景,从视觉上看可能延伸到其他行,有可能还会与其他内容重叠。不允许指定负内边距值。

    4、padding-left 属性:设置元素左内边距(空白)。该属性设置元素左内边距的宽度。行内非替换元素上设置的左内边距仅在元素所生成的第一个行内框的左边出现.

    5、margin 属性:在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

    展开全文
  • 今天在写网页时无意中发现两个div嵌套时父标签没有写垂直外边距而子标签写了垂直外边距会发生问题,上网查了很多博客都没有详细的解答,只能自己研究了,最终得出结果,先上代码. 上效果 父标签如果没有垂直外边距...

    今天在写网页时无意中发现两个div嵌套时父标签没有写垂直外边距而子标签写了垂直外边距会发生问题,上网查了很多博客都没有详细的解答,只能自己研究了,最终得出结果,先上代码.

    上效果

    父标签如果没有垂直外边距父标签的top会取子标签中垂直外边距的最大值,最大值会赋值给父标签的margin-top,父标签的margin-top是相对于body的,所以父标签的top聚力body的top200px,这种情况下正常来说子标签的margin-top和margin-bottom是应该相对于父标签的top和bottom的,但实际上却都是相对于父标签的top,子标签的margin-top:200px是子标签的top相对于父标签的top的聚力,子标签的margin-bottom:100px也是子标签的bottom相对于父标签的top的距离.

     

     

    再上一组代码:

     

    如果子标签中有垂直外边距父标签中也有垂直外边距父标签的top依然会取子标签中垂直外边距的最大值,但父标签中的垂直外边距依然使用自己的.

    展开全文
  • CSS外边距叠加

    2019-11-11 22:56:44
    外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 接下来举几个简单例子: Html代码 收藏代码 垂直外边距叠加 ...
  • CSS外边距重叠

    2020-06-19 12:34:38
    1、什么是外边距重叠 margin-college称作外边距重叠。在CSS中,相邻的两个盒子(可能是兄弟关系或者祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,因而所结成的外边距称为折叠...
  • 外边距塌陷

    2017-12-13 15:07:15
    嵌套的盒子,直接给子盒子设置垂直方向外边距的时候,会发生外边距塌陷。 解决方法:①给父盒子设置边框; ②给父盒子设置overflow:hidden。推荐使用!塌陷效果代码:<!DOCTYPE html> <html> <title></title>...
  • 外边距的典型应用2.1 示例代码2.2 运行结果3. 外边距合并4.嵌套元素垂直外边距的塌陷5. 清除内外边距 1. 盒子模型之外边距 margin 2. 外边距的典型应用 2.1 示例代码 <!DOCTYPE html> <html lang="en"&...
  • 清除元素的默认内外边距... /* 清除外边距 */ } 注意: * 行内元素为了照顾兼容性, 尽量只设置左右内外边距, 不要设置上下内外边距。 <!DOCTYPE html> <html lang="en"> <head> <meta...
  • 父子级外边距合并的解决方式解决方式:1解决方法2解决方法3解决方法4 下面展示一些代码,看看出现的结果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
  • 这里就和大家分享一下:一、内边距如下面代码html:css:.test{width:100px;height:100px;background-color:#fbc;padding:10px 20px 30px 40px;}这时候在这个div中会形成一个内容框它里顶部边框距离为10px,右边20px,...
  • 一,效果图。...二,代码。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Margin</title> <style> p{ backgr...
  • 外边距样式属性(margin) 外边距样式属性(margin):设置边框外的距离。 属性:margin-top样式属性,margin-bottom样式属性,margin-left样式属性和margin-right样式属性。 代码示例: <!DOCTYPE html>...
  • 外边距合并问题 父子级 父元素会随着子元素一起拥有外边距。 a、给父元素添加一个overflow:hidden; b、把父元素设置为IE盒子,然后加padding c、给父元素加border d、给父元素或者是本身加上浮动float e、给父元素...
  • 谈到外边距塌陷(也称为外边距合并),想必大家在学习的过程中也都有遇到过,那么下面就来总结一下外边距塌陷的几种情况以及解决办法吧! 一,相邻父子元素垂直外边距塌陷(合并) 首先我们编写一段代码来测试一下,...
  • 设置了第一个外边距 。可对比下面代码中CSS .a1的样式 相对照 其他也可类似用控制器来查看边距 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=...
  • 情景1:两个父子关系的块级盒子会出现上外边距塌陷的情况:上外边距为父子中大的那一个。解决办法:为父级盒子添加上内边距/上边框/overflow:hidden,为盒子添加浮动、定位。 代码 <!DOCTYPE html> <html...
  • margin外边距折叠

    2017-12-13 19:11:09
    别着急,你可能写过这样的代码: CSS: p{ margin: 50px; } HTML: 我是一个华丽的段落,别看我文字少 我是另一个华丽的段落 大家觉得这 2p 之间会发生点什么?是会合体呢?还是分开?来看看 ...
  • 可以实现,但垂直居中使用外边距是无法达到效果的。(页面设置height:100%;是无效的),这里使用绝对定位+负外边距的方式来实现垂直居中,但同时要考虑页面重置大小的情况,需要使用js来修正。 1、让层水平居中 ...
  • 内边距和外边距的百分比数值是相对于其父元素的width计算的。 代码: <!DOCTYPE html> <html> <head> <style> .a { width: 200px; height: 200px; border: 1px solid black; } .b ...
  • 通过外边距是实现图片的运动 代码模块: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>AnimationInstanceCSS_Test</title> <...
  • html代码如下: <div class="outer"> <div class="inner"></div> </div> css代码如下: <style type="text/css"> .outer{ width: 400px; height: 400px; ...
  • 一、父子级元素 通常,大盒子中嵌套小盒子,如果给小盒子添加margin-top属性,... html代码如下: <div class="outer"> <div class="inner"></div> </div> css代码如下 <s...
  • html代码如下: <div class="outer"> <div class="inner"></div> </div> css代码如下 <style type="text/css"> .outer{ width: 400px; height: 400px; b
  • CSS中div的外边距margin

    千次阅读 2018-05-11 11:30:29
    ---------------------------------------------CSS中div的外边距margin----------------------------------------- 代码示例:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;...
  • 什么是外边距塌陷?满足以下条件就会产生外边距塌陷现象: 产生在嵌套元素中(父元素与子元素) 垂直方向上的外边距合并现象(margin-top和margin-bottom) 话不多说,直接上代码进行演示:带你走向人生的的巅峰,...
  • 做练习的时候遇到一个margin的问题,代码结构如下,给父元素body中的子元素div设置了margin:50px auto;本来我是想让子元素div距离父元素上边拉开50个像素,结果却是子元素div和父元素body一样高,并且距离上边50px...
  • 先看如下demo代码: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>空白边距叠加demo@Mr.Think</title> <style> body{width:300px; font-family:’微软...

空空如也

空空如也

1 2 3 4 5 ... 18
收藏数 350
精华内容 140
热门标签
关键字:

html外边距代码