前端基础------margin上下传递

1,出现的原因及解决方法

◼ margin-top传递

如果块级元素的顶部线和块级父元素的顶部线重叠,那么这个块级元素的margin-top值会传递给父元素

◼ margin-bottom传递

如果块级元素的底部线和块级父元素的底部线重叠,并且父元素的高度是auto,那么这个块级元素的margin-bottom值会传递给父元素

◼水平方向上的margin是永远不会发生传递现象

◼如何防止出现传递问题?

给父元素设置padding-top\padding-bottom

给父元素设置border

给父元素或者子元素设置display: inline-block

以后理解得更深入,还会学到其他解决方法

◼建议  margin一般是用来设置兄弟元素之间的间距

 padding一般是用来设置父子元素之间的间距

2,上下margin传递例子

(HTML代码)

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/上边距传递CSS.css">
    <link rel="stylesheet" href="css/下边距传递CSS.css">
</head>
<body>
    <!-- 块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top值会传递给父元素。 -->
    <div class="reference">参考盒子</div>
<div class="box">
  <div class="inner"></div>
</div>

<!-- 块级元素的底部线和父元素的底部线重叠,并且父元素的高度是auto,那么这个块级元素的margin-bottom值会传递给父元素。 -->
<div class="boxLow">
    <div class="innerLow">inner</div>
  </div>
  <div class="referenceLow">参考盒子</div>
</body>
</html>

( margin-top传递CSS代码)

css 复制代码
.reference {
    width: 100px;
    height: 100px;
    background-color: #f00;
    color: #fff;
  }
  
  .box {
    width: 200px;
    height: 200px;
    background-color: #0f0;
  }
  
   .inner {
     width: 100px;
     height: 100px;
     background-color: #00f;
     margin-top: 20px;
   }
  

(margin-bottom传递CSS代码)

css 复制代码
.boxLow {
    width: 200px;
    height: auto; /* 给父元素高度设置auto,或者不设置高度,默认为auto */
    background-color: #0f0;
    margin-top: 20px;
  }
  
  .innerLow {
    width: 100px;
    height: 100px;
    background-color: #00f;
    margin-bottom: 20px;
    color: #fff;
  }
  
  .referenceLow {
    width: 100px;
    height: 100px;
    background-color: #f00;
    color: #fff;
  }
  

3,结果参考

相关推荐
YBN娜1 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=1 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck6 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!26 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。32 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼38 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093341 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架