css - 为什么会有不必要的填充？

Question

<div style="background-color: #EEEEEE; display: inline-table;">
  <div style="display: inline-table;  width: 100%">
    <div style="display: table-cell; width: 5px; height: 5px;"><img src="/design/_messages/frame00.gif"></div>
    <div style="display: table-cell; height: 5px; background-image: url('/design/_messages/frameUP.gif');"></div>
    <div style="display: table-cell; width: 5px; height: 5px;"><img src="/design/_messages/frame01.gif"></div>
  </div>
  <div style="display: inline-table; width: 100%">
    <div style="display: table-cell; width: 5px; background-image: url('/design/_messages/frameLEFT.gif');"></div>
    <div style="display: table-cell; margin: 0; padding: 0; border: none">sdfkl sdklf jklfff ffff fff fff fffffsjdf klsfffff fff fjdf</div>
    <div style="display: table-cell; text-align: right; width: 5px; background-image: url('/design/_messages/frameRIGHT.gif');"></div>
  </div>
  <div style="display: inline-table;  width: 100%">
    <div style="display: table-cell; width: 5px; height: 5px;"><img src="/design/_messages/frame10.gif"></div>
    <div style="display: table-cell; height: 5px; background-image: url('/design/_messages/frameDOWN.gif');"></div>
    <div style="display: table-cell; width: 5px; height: 5px;"><img src="/design/_messages/frame11.gif"></div>
  </div>

https://jsfiddle.net/Lsroqeyg/

右边有一个不必要的间距。右边太远了。看图:

Answer 1

如下图将父元素的显示改为inline-grid

<div style="background-color: #EEEEEE; display: inline-grid;"> <!--inline-grid here-->
  <div style="display: inline-table;  width: 100%">
    <div style="display: table-cell; width: 5px; height: 5px;"><img src="/design/_messages/frame00.gif"></div>
    <div style="display: table-cell; height: 5px; background-image: url('/design/_messages/frameUP.gif');"></div>
    <div style="display: table-cell; width: 5px; height: 5px;"><img src="/design/_messages/frame01.gif"></div>
  </div>
  <div style="display: inline-table; width: 100%">
    <div style="display: table-cell; width: 5px; background-image: url('/design/_messages/frameLEFT.gif');"></div>
    <div style="display: table-cell; margin: 0; padding: 0; border: none">sdfkl sdklf jklfff ffff fff fff fffffsjdf klsfffff fff fjdf</div>
    <div style="display: table-cell; text-align: right; width: 5px; background-image: url('/design/_messages/frameRIGHT.gif');"></div>
  </div>
  <div style="display: inline-table;  width: 100%">
    <div style="display: table-cell; width: 5px; height: 5px;"><img src="/design/_messages/frame10.gif"></div>
    <div style="display: table-cell; height: 5px; background-image: url('/design/_messages/frameDOWN.gif');"></div>
    <div style="display: table-cell; width: 5px; height: 5px;"><img src="/design/_messages/frame11.gif"></div>
  </div>