table {
      margin-bottom: 8px;
    }
    td {
      border: 1px solid;
    }

  <summary>20 テーブル</summary>
  table-layout: fixed;
  <table style="table-layout: fixed;">
    <tr><td>a</td><td>bbbbbbb</td></tr>
    <tr><td>c</td><td>d</td></tr>
  </table>
  table-layout: fixed; width: 50px;
  <table style="table-layout: fixed; width: 50px;">
    <tr><td>a</td><td>bbbbbbb</td></tr>
    <tr><td>c</td><td>d</td></tr>
  </table>
  table-layout: auto;
  <table style="table-layout: auto;">
    <tr><td>a</td><td>bbbbbbb</td></tr>
    <tr><td>c</td><td>d</td></tr>
  </table>
  table-layout: auto; width: 50px;
  <table style="table-layout: auto; width: 50px;">
    <tr><td>a</td><td>bbbbbbb</td></tr>
    <tr><td>c</td><td>d</td></tr>
  </table>
  border-collapse: collapse;
  <table style="border-collapse: collapse;">
    <tr><td>a</td><td>bbbbbbb</td></tr>
    <tr><td>c</td><td>d</td></tr>
  </table>

    details > div {
      border: 1px solid black;
      width: fit-content;
      margin-bottom: 8px;
      background-color: pink;
    } details > div > div {
      background-color: greenyellow;
      width:100px;
      height:100px;
    } details > div > div > div {
      background-color: lightcyan;
      width:50px;
      height:50px;
    }
    div.cls100 {
      width:100px;
      height:100px;
    }
    div.cls50 {
      width:50px;
      height:50px;
    }

  <b>,(width,height)</b>
  <div><div>/width:100px;height:100px;</div></div>
  <div><div style="width:50px;height:50px;">/width:50px;height:50px;</div></div>
  <b>padding,padding-left</b>
  <div><div style="padding:10px;">/padding:10px;</div></div>
  <div><div style="padding-left:10px;">/padding-left:10px;</div></div>
  <b>margin,margin-left</b>
  <div><div style="margin:10px;">/margin:10px;</div></div>
  <div><div style="margin-left:10px;">/margin-left:10px;</div></div>
  position [static,relative,absolute,fixed,-fixed](position:fixed;は親のサイズに依るため、枠の2x2のみ表示。position:fixed;bottom:0;left:0;はdeteilsの子。)
  <div><div style="position:static;">/position:static;</div></div>
  <div><div style="position:relative;">/position:relative;</div></div>
  <div><div style="position:absolute;">/position:absolute;</div></div>
  <div style="width:100px;height:100px"><div style="position:fixed;width:100px;height:100px;bottom:350px;left:0;">⇔width:100px;height:100px/position:fixed;width:100px;height:100px;bottom:350px;left:0;</div>⇔(width:100px;height:100px/position:fixed;width:100px;height:100px;bottom:350px;left:0;)</div>
  <div style="position:fixed;bottom:0;left:0;">position:fixed;bottom:0;left:0;</div>
   .cls100 position
  <div class="cls100"><div style="position:static;">/position:static;</div></div>
  <div class="cls100"><div style="position:relative;">/position:relative;</div></div>
  <div class="cls100"><div style="position:absolute;">/position:absolute;</div></div>

  <b>top,left,rigth,bottom,index</b>
  top,left,rigth,bottom
  <div><div style="position:relative;"><div style="position:absolute;top:10px;">relative/absolute top:10px;</div></div></div>
  <div><div style="position:relative;left:10px;"><div style="position:absolute;left:10px">relative;left:10px;/absolute left:10px;</div></div></div>
  <div><div style="position:relative;"><div style="position:absolute;right:10px;">relative/absolute right:10px;</div></div></div>
  <div><div style="position:relative;"><div style="position:absolute;bottom:20px;">relative/absolute bottom:20px;</div></div></div>
  index
  <div><div style="position:relative;">
    <div style="position:absolute;z-index:1;background-color:chocolate;margin-left: 30px;">1</div>
    <div style="position:absolute;z-index: 0;">0</div>
  </div></div>
  <div><div style="position:relative;">
    <div style="position:absolute;z-index:0;background-color:chocolate;margin-left: 30px;">0</div>
    <div style="position:absolute;z-index: 1;">1</div>
  </div></div>

  <b>float,overflow</b>
  float [left,right,(left,left)...]
  <div><div>[<div style="float:left;">float:left</div>]</div></div>
  <div><div>[<div style="float:right;">float:right</div>]</div></div>
  <div><div>[<div style="float:left;">float:left</div><div style="float:left;">float:left</div>]</div></div>
  <div><div>[<div style="float:left;">float:left</div><div style="float:left;clear:left;">float:left;clear:left;</div>]</div></div>
  <div><div>[<div style="float:left;">float:left</div><div style="float:left;clear:right;">float:left;clear:right;</div>]</div></div>
  <div><div>[<div style="float:left;">float:left</div><div style="float:left;clear:both;">float:left;clear:both;</div>]</div></div>
  overflow [auto,visible,hidden,scroll]
  <div><div style="overflow:auto;">overflow:auto;</div></div>
  <div><div style="overflow:visible;">overflow:visible;</div></div>
  <div><div style="overflow:hidden;">overflow:hidden;</div></div>
  <div><div style="overflow:scroll;">overflow:scroll;</div></div>
  display [none,block,inline,flex,inline-flex]
  <div><div style="display:none;">display:none;<p>a</p><p>b</p></div></div>
  <div><div style="display:block;">display:block;<p>a</p><p>b</p></div></div>
  <div><div style="display:inline;">display:inline;<p>a</p><p>b</p></div></div>
  <div><div style="display:flex;">display:flex;<p>a</p><p>b</p></div></div>
  <div><div style="display:inline-flex;">display:inline-flex;<p>a</p><p>b</p></div></div>
  visiblity [visible,hidden]
  <div><div style="visibility: visible;">visibility: visible;</div></div>
  <div><div style="visibility: hidden;">visibility: hidden;</div></div>

  <b>vertical-align, object-fit</b>
  vertical-align
  <div><div>[<span style="vertical-align:baseline;font-size: smaller;">vertical-align:baseline</span>]</div></div>
  <div><div>[<span style="vertical-align:middle;font-size: smaller;">vertical-align:middle</span>]</div></div>
  <div><div>[<span style="vertical-align:top;font-size: smaller;">vertical-align:top</span>]</div></div>
  <div><div>[<span style="vertical-align:bottom;font-size: smaller;">vertical-align:bottom</span>]</div></div>
  
  object-fit (<a href="z.png">z.png</a> 92x89)
  <div><div><img src="z.png"></div></div>
  object-fit:fill; width:100%; height:100%;
  <div><div><img src="z.png" style="object-fit:fill; width:100%; height:100%;"></div></div>
  object-fit:contain; width:100%; height:100%;
  <div><div><img src="z.png" style="object-fit:contain; width:100%; height:100%;"></div></div>
  object-fit:cover; width:100%; height:100%;
  <div><div><img src="z.png" style="object-fit:cover; width:100%; height:100%;"></div></div>
  object-fit:none; width:100%; height:100%;
  <div><div><img src="z.png" style="object-fit:none; width:100%; height:100%;"></div></div>
  object-fit:scale-down; width:100%; height:100%;
  <div><div><img src="z.png" style="object-fit:scale-down; width:100%; height:100%;"></div></div>
  object-fit:fill; width:60px; height:60px;
  <div><div><img src="z.png" style="object-fit:fill; width:60px; height:60px;"></div></div>
  object-fit:contain; width:60px; height:60px;
  <div><div><img src="z.png" style="object-fit:contain; width:60px; height:60px;"></div></div>
  object-fit:cover; width:60px; height:60px;
  <div><div><img src="z.png" style="object-fit:cover; width:60px; height:60px;"></div></div>
  object-fit:none; width:60px; height:60px;
  <div><div><img src="z.png" style="object-fit:none; width:60px; height:60px;"></div></div>
  object-fit:scale-down; width:60px; height:60px;
  <div><div><img src="z.png" style="object-fit:scale-down; width:60px; height:60px;"></div></div>
  
  object-position (width:100px; height:100px; object-fit:none; を共通で適用)
  <div><div><img src="z.png" style="width:100px;height:100px;object-fit: none;"></div></div>
  object-position: center center;
  <div><div><span><img src="z.png" style="width:100px;height:100px; object-fit:none; object-position: center center;"></span></div></div>
  object-position: right bottom;
  <div><div><img src="z.png" style="width:100px;height:100px; object-fit:none; object-position: right bottom;"></div></div>
  object-position: right 10px bottom 10px;
  <div><div><img src="z.png" style="width:100px;height:100px; object-fit:none; object-position: right 10px bottom 10px;"></div></div>