跳到主要内容

空块元素

2023年02月27日
柏拉文
越努力，越幸运

空的块级元素: 当一个块元素上边界margin-top 直接贴到元素下边界margin-bottom时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框border、内边距padding、高度height、最小高度min-height 、最大高度max-height 、内容设定为 inline 或是加上clear-fix的时候。

一、形成​

实时编辑器
function Test(props) {
 const sibling1 = {
    width: "200px",
    height: "200px",
    marginBottom: "60px",
    backgroundColor: "red",
 }
 const sibling2 = {
   marginTop: "20px",
   marginBottom: "20px"
 }
 const sibling3 = {
    width: "200px",
    height: "200px",
    marginTop: "60px",
    backgroundColor: "blue",
 }
 

  return (
     <div>
         <div style={ sibling1 }></div>
         <div style={ sibling2 }></div>
         <div style={ sibling3 }></div>
     </div>
  );
}
结果
Loading...

如上所示: sibling2 为空元素, 那么导致sibling1与sibling3发生了边距重叠

二、解决​

3.1 空元素添加border​

解决思路: 为空元素添加border 只是解决了sibling1与sibling3的边距重叠, sibling1与sibling2、sibling2与sibling3 还是会发生边距重叠的。

实时编辑器
function Test(props) {
 const sibling1 = {
    width: "200px",
    height: "200px",
    marginBottom: "60px",
    backgroundColor: "red",
 }
 const sibling2 = {
   marginTop: "20px",
   marginBottom: "20px",
   border: "1px solid transparent"
 }
 const sibling3 = {
    width: "200px",
    height: "200px",
    marginTop: "60px",
    backgroundColor: "blue",
 }
 

  return (
     <div>
         <div style={ sibling1 }></div>
         <div style={ sibling2 }></div>
         <div style={ sibling3 }></div>
     </div>
  );
}
结果
Loading...

3.2 空元素添加height​

解决思路: 为空元素添加height 只是解决了sibling1与sibling3的边距重叠, sibling1与sibling2、sibling2与sibling3 还是会发生边距重叠的。

实时编辑器
function Test(props) {
 const sibling1 = {
    width: "200px",
    height: "200px",
    marginBottom: "60px",
    backgroundColor: "red",
 }
 const sibling2 = {
   marginTop: "20px",
   height: "1px",
   marginBottom: "20px"
 }
 const sibling3 = {
    width: "200px",
    height: "200px",
    marginTop: "60px",
    backgroundColor: "blue",
 }
 

  return (
     <div>
         <div style={ sibling1 }></div>
         <div style={ sibling2 }></div>
         <div style={ sibling3 }></div>
     </div>
  );
}
结果
Loading...

3.3 空元素添加padding​

解决思路: 为空元素添加padding 只是解决了sibling1与sibling3的边距重叠, sibling1与sibling2、sibling2与sibling3 还是会发生边距重叠的。

实时编辑器
function Test(props) {
 const sibling1 = {
    width: "200px",
    height: "200px",
    marginBottom: "60px",
    backgroundColor: "red",
 }
 const sibling2 = {
   marginTop: "20px",
   marginBottom: "20px",
   padding: "1px"
 }
 const sibling3 = {
    width: "200px",
    height: "200px",
    marginTop: "60px",
    backgroundColor: "blue",
 }
 

  return (
     <div>
         <div style={ sibling1 }></div>
         <div style={ sibling2 }></div>
         <div style={ sibling3 }></div>
     </div>
  );
}
结果
Loading...

3.4 空元素添加overflow: hidden​

实时编辑器
function Test(props) {
 const sibling1 = {
    width: "200px",
    height: "200px",
    marginBottom: "60px",
    backgroundColor: "red",
 }
 const sibling2 = {
   marginTop: "20px",
   marginBottom: "20px",
   overflow: "hidden"
 }
 const sibling3 = {
    width: "200px",
    height: "200px",
    marginTop: "60px",
    backgroundColor: "blue",
 }
 

  return (
     <div>
         <div style={ sibling1 }></div>
         <div style={ sibling2 }></div>
         <div style={ sibling3 }></div>
     </div>
  );
}
结果
Loading...

3.5 空元素添加display:inline-block​

解决思路: 为空元素添加inline-block完全解决了sibling1、sibling2、sibling3之间的边距重叠问题。

实时编辑器
function Test(props) {
 const sibling1 = {
    width: "200px",
    height: "200px",
    marginBottom: "60px",
    backgroundColor: "red",
 }
 const sibling2 = {
   display: "inline-block",
   marginTop: "20px",
   marginBottom: "20px"
 }
 const sibling3 = {
    width: "200px",
    height: "200px",
    marginTop: "60px",
    backgroundColor: "blue",
 }
 

  return (
     <div>
         <div style={ sibling1 }></div>
         <div style={ sibling2 }></div>
         <div style={ sibling3 }></div>
     </div>
  );
}
结果
Loading...