CSS之意想不到的坑

1. margin纵向重叠问题

CSS之意想不到的坑_第1张图片

相邻元素的margin-top和margin-bottom会发生重叠

空内容的

也会重叠

答案: 15px

BFC会解决这个问题

BFC:一块独立渲染区域,内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件:脱离文档流的情况下需要BFC

  • float不是none
  • position是absolute 或 fixed
  • overflow不是visible 
  • CSS之意想不到的坑_第2张图片
  • display是flex inline-block等

 

2. margin负值问题

margin-top、margin-left负值,元素本身向上、向左移动

margin-right负值, 右侧元素左移,自身不受影响

margin-bottom负值,下边元素上移,自身不受影响

你可能感兴趣的:(css)