🗒️CSS3小问题-子元素设置margin-top为什么影响了父元素
2022-12-13
| 2024-3-22
0  |  阅读时长 0 分钟
date
icon
password
description
permalink
categories
type
status
slug
summary
tags
category
updated
Mar 22, 2024 09:10 AM

前言

今天遇到一个问题,我写了下面一个样式,发现子的margin-top没有作用,但是父亲的却出现了子的margin-top值。
 

原因

在css2.1盒模型仲规定的内容:
相邻两个元素或者是嵌套元素时都会形成这个问题;当两个垂直外边距 相遇时,会形成一个外边距 ,称为‘外边距合并';以外边距最大者为设置基准。所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻(/同级或嵌套)的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。
所以我的父元素和子元素之间没有分割,然后就导致了子元素的margin-top出现在父亲元素上。

解决

  1. 父级或子元素使用浮动或者绝对定位absolute浮动或绝对定位不参与margin的折叠
  1. 父级overflow:hidden;
  1. 父级设置padding(破坏非空白的折叠条件)
  1. 父级设置border
  • Css
  • Vue3小技巧-业务逻辑Hooks封装CSS3小问题-flex布局子元素高度设置无效
    • Waline
    目录