CSS 嵌套元素外边距缩进问题的优化方案

阅读量：

文章结构概览

- - - 1. 嵌套块元素在垂直方向上外边距塌陷现象具体指什么？
  - 2. 应对这一问题的可行方法

1. 什么是嵌套块元素垂直外边距的塌陷？

当两个具有嵌套关系（即父子关系）的块级元素同时存在上外边距时，父元素将采用两者中较大的外边距值，而子元素的上外边距则无法正常显示。

若仅对父元素设置上外边距，则可正常呈现效果：

复制代码

    <!DOCTYPE html>
    <html lang="en">
      <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>插件</title>
      </head>
      <style>
      .father{
    height:200px;
    width:200px;
    background-color:pink;
      }
      .father .son{
    height:100px;
    width:100px;
    background-color: yellow;
      }
      </sty

全部评论 (0)

还没有任何评论哟~