margin正值和margin负值问题

zn_100
444 阅读4分钟

margin

CSS 中的 margin 属性可以用于设置元素的外边距，给一个元素设置了margin也就是设置了该元素与周围元素之间的距离。

margin正值

方向属性效果
垂直方向margin-top元素自身往下移动
垂直方向margin-bottom元素自身不变,下面的元素向下移动
水平方向margin-left元素自身往右移动
水平方向margin-right元素自身不变,右边的元素向右移
基础代码如下:
  {
            padding: 0;
            margin: 0;
        }
        body{
            /* 宽度为浏览器视口窗口宽度（宽度 100vw），高度为视口窗口高度（高度 100vh--实现全屏显示的效果 */
            widows: 100vw;
            height: 100vh;
            /* 弹性布局-控制子元素垂直水平居中 */
            display: flex;
            justify-content: center;
            align-items: center;
           
        }
        
      .father {
        width: 400px;
        height: 400px;
        background-color: black;
      }
      .father div{
        width: 150px;
        height: 150px;
      }

       .box1 {
        background-color: skyblue;
      }

      .box2 {
        background-color: blue;
      }
    </style>
  </head>


 <body>
    <div class="father"> 
      <div class="box1">box1</div>
      <div class="box2">box2</div>
    </div>
    </body>

接下来都在基础码上进行改变
基础代码效果如图1:

image.png

垂直方向

margin-top正值

给分别给box1和box2添加margin-top,如图2和图3所示

 .box1 {
        margin-top: 50px;
        background-color: skyblue;
      }

如图2: image.png

.box2 {
        margin-top:50px;
        background-color: blue;
      }

如图3: image.png

由此可见,正值的margin-top,会使自身元素下移,还会影响与他它下面的元素下移

margin-bottom正值

给box1和box2添加margin-bottom,如图4和图5所示

    .box1 {
        /* margin-top: 50px; */
        margin-bottom: 50px;
        background-color: skyblue;
      }

如图4 image.png

 .box2 {
        /* margin-top:50px; */
        margin-bottom: 50px;
        background-color: blue;
      }

如图5 image.png 由此可知,正值的margin-bottom对元素本身无效,但是会影响其下方的元素下移.

===>想让下方的元素下移,给自身设置正值margin-bottom或者给下方的元素设置正值margin-top

水平方向

先设置浮动,让box和box2一行排列,

  .father div{
    /* 左浮,一行排列 */
        float: left;
        
        width: 150px;
        height: 150px;
      }

图6 image.png

margin-left正值

分别给box1和box2设置margin-left正值,如图6和图7所示

  /* margin-top: 50px; */
        /* margin-bottom: 50px; */
        margin-left: 50px;
        background-color: skyblue;
      }

图7 image.png

 .box2 {
        /* margin-top:50px; */
        /* margin-bottom: 50px; */
        margin-left: 50px;
        background-color: blue;
      }
      }

图8

image.png 由此可见,margin-left正值,会使元素自身向右移动,且影响其右边的元素一起向右移.

margin-right正值

给box1和box2分别设置margin-right,如图9和图10所示

 .box1 {
        /* margin-top: 50px; */
        /* margin-bottom: 50px; */
        /* margin-left: 50px; */
        margin-right: 50px;
        background-color: skyblue;
      }

图9 image.png

      .box2 {
        /* margin-top:50px; */
        /* margin-bottom: 50px; */
        /* margin-left: 50px; */
        margin-right: 50px;
        background-color: blue;
      }
      }

图10 image.png 由此可见,margin-right正值,不会改变自身位置,但是会影响其右边的元素向右移动

margin负值

方向属性效果
垂直方向margin-top元素自身往上移动
垂直方向margin-bottom元素自身不变,下面的元素向上移动
水平方向margin-left元素自身往左移动
水平方向margin-right元素自身不变,右边的元素向左移
依然使用基础代码,
改变了box和box2的背景颜色,没有设置margin前的盒子布局
图11
image.png

垂直方向

margin-top负值

分别给box1和box2设置margin-top负值,如图12和图13所示

.box1 {
        margin-top: -50px;
        background-color: pink;
      }

图12 image.png

.box2 {
        margin-top: -50px;
        background-color: red;
      }

图13 image.png 由此可见,margin-top负值,会是自身元素向上移动,下方元素也会一起移动

margin-bottom负值

分别给box1和box2设置margin-top负值,如图14和图15所示

.box1 {
        /* margin-top: -50px; */
        margin-bottom: -50px;
        background-color: pink;
      }

图14 image.png

.box1 {
        /* margin-top: -50px; */
        margin-bottom: -50px;
        background-color: pink;
      }

图15

image.png 由此可见,margin-bottom负值,自身不变,但是会影响其下方的元素上移

水平方向

给box1和box2设置左浮,实现一行排列

 .father div {
        /* 左浮,一行排列 */
        float: left;
        width: 150px;
        height: 150px;
      }

图16 image.png

margin-left负值

分别给box1和box2设置margin-left负值,如图17和图18 所示

   .box1 {
        /* margin-top: -50px; */
        /* margin-bottom: -50px; */
        margin-left: -50px;
        background-color: pink;
      }

图17 image.png

   .box2 {
        /* margin-top: -50px; */
        /* margin-bottom: -50px; */
        margin-left: -50px;
        background-color: red;
      }

图18

image.png 由此可见,margin-left负值,会使自身元素向左移动,也会影响右边的元素一起左移

margin-right负值

分别给box1和box2设置margin-righ负值,如图19和图20 所示

   .box1 {
        /* margin-top: -50px; */
        /* margin-bottom: -50px; */
        /* margin-left: -50px; */
        margin-right:  -50px;
        background-color: pink;
      }

图19

image.png

    .box2 {
        /* margin-top: -50px; */
        /* margin-bottom: -50px; */
        /* margin-left: -50px; */
        margin-right: -50px;
        background-color: red;
        }

图20

image.png 由此可见,margin-right负值,自身元素位置不变,但是影响右边的元素一起左移

avatar
文章
阅读
粉丝