Notes on non replacement elements in the line (padding, margin, and border)

Notes on non replacement elements in the line （padding、margin and border）

1. The following attributes do not take effect for inline non replacement elements

• width and height;
• margin-top and margin-bottom（ about margin It can take effect normally ）;

2. The following attributes have a special effect on inline non replacement elements

• padding-top and padding-bottom（ about padding It can take effect normally ）;

  • Sample code ：

    span {
            
      padding-top: 8px;
      padding-bottom: 8px;
      background-color: red;
    }
    

    <div> On div</div>
    <span>span1</span>
    <span>span2</span>
    <div> Next div</div>
    

  • Running results ：span Set up and down padding yes Do not occupy space Of , So it will extend to the upper and lower elements ;

    

• Up and down border（ about border It can take effect normally ）;

  • Sample code ：

    span {
            
      border-top: 8px solid green;
      border-bottom: 8px solid green;
      background-color: red;
    }
    

    <div> On div</div>
    <span>span1</span>
    <span>span2</span>
    <div> Next div</div>
    

  • Running results ：span Set up and down border yes Do not occupy space Of , So it will extend to the upper and lower elements ;