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

<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/
右边有不必要的间距。右边缘太远。见图片：

最佳答案

将父元素的显示更改为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>

关于css - 为什么会有不必要的填充？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48432409/