深入理解CSS盒模型中的margin

Eliya
  • 外边距
  1. 设置外边距会在元素外创建额外的“空白”,“空白”通常指不能放其他元素的区域,而且在这个区域可以看到父元素的背景,外边距不会影响盒子的大小,但会影响盒子的位置

margin会影响到盒子实际占用文档流的空间

  1. 外边距与行内元素:对于行内非替换元素,上下外边距不受影响,行高也不受影响。行内替换元素则行高会有变化。负外边距是使行内替换元素挤入其它行的唯一办法
  2. 负外边距
  3. 四个方向的外边距解析

❤ margin-top:设置正值,自身元素会向下移动,负值反之

❤ margin-left:设置正值,自身元素会向右移动,负值反之

❤ margin-bottom:设置正值,下边的元素会向下移动,负值反之

❤ margin-right:默认情况下不会产生任何效果,右边有元素效果和margin-bottom类似

元素在页面中是按照自左向右的顺序排列的

  1. 深入理解margin重叠

★属于同一个BFC的两个相邻Box的margin会发生重叠

★垂直外边距的重叠-相邻的垂直方向外边距会发生重叠现象

1)兄弟元素(对开发有利,不需要处理)

二者都是正值时:兄弟元素的相邻垂直外边距会取两者之间的较大值

一正一负时:取二者的和

都是负值:取二者绝对值较大的

2)父子元素(必须处理)

子元素会传递给外边距
解决方案一:开启BFC

   \*{ margin: 0; padding:0; }
   #up,#down{ width:200px;
   height:200px; 
   background: #FFC0CB; margin:50px; } 
   \*{ margin: 0; padding:0; } #wrap{ width: 300px; height: 300px; background: #FF1493; margin: 50px; } #down{ width: 150px; height: 150px; background: #FFC0CB; margin:50px; }

解决方案二:利用clearfix类

    Document .box1{ width: 300px; height: 300px; background-color: #008000; }
    .box2{ width: 100px; height: 100px; background-color:deepskyblue; margin-top:200px ; } /\* 
    .box1::before{ content: ''; display: table; }
    .clearfix::before{ content:'' ; display: table; }
阅读 861
1 声望
0 粉丝
0 条评论
1 声望
0 粉丝
文章目录
宣传栏