JSFiddle - React, Tailwind, and code Playground

by chuangchen

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body style="padding:20px;">
    body: { padding:20px; }
    <div style="background:lightgrey;">
      <h3>如果设置左边或顶部的负外边距，元素就会相应地向左或向上移动</h3>
      <p></p>
      <div style="background:red;padding:1em;">
        如果不给一个块级元素指定宽度，它会自然地填充容器的宽度
      </div>
      <div style="background:rgba(0,0,255,0.3); padding:1em; 
margin-top:-1em;">
        margin-top:-1em;
      </div>

      <br>
      <br>
      <br>
      <br>
      <br>
      <br>

      <div style="background:red;padding:1em;">
        AA
      </div>
     <!--  <div style="background:rgba(0,0,255,0.3); padding:1em; 
      margin-left:20px;">
        margin-left:20px; <br>
        由于是block元素默认撑满剩余宽度
      </div> -->
      <div style="background:rgba(0,255,0,0.3); padding:1em; 
margin-left:-20px;">
        margin-left:-10px;<br>
        可以拉伸到比容器还宽。左右加上负外边距，会把它拉出容器
      </div>

      <br>    
      <div style="background:rgba(255,0,1);padding:1em;margin-bottom:-20px;">  margin-bottom:-20px; <br>
      <div style="margin-bottom:20px;">
        底部负margin将元素拉向自己     
      </div> 
      </div>
      <div style="background:rgba(0,0,255,0.3); padding:2em;">
        padding:2em
      </div>
    </div>





  </body>

</html>

CSS

div {
  display: block;
}