如何在css中设置响应边距（与应用的元素的宽度/高度有关）？

我想知道是否有办法在CSS中设置“响应边距”。 以下是我的意思的说明：

<div style="width:100%;">

  <div style="width:18%; margin:0 1%;">
  <div style="width:18%; margin:0 1%;">
  <div style="width:18%; margin:0 1%;">
  <div style="width:18%; margin:0 1%;">
  <div style="width:18%; margin:0 1%;">

</div>

我希望

边距

足够聪明，能够理解“我想要

宽度的1%

”并将

高度的0%应用于
顶部/底部

不幸的是，这不是默认行为，那么如何管理它呢？实际上，我正在使用javascript，但我正在尝试优化我的性能。
像这样的东西怎么样

使用cherniv的盒子尺寸概念

code

据此,

若将边距或填充设置为“百分比”，则表示父元素宽度的百分比，所以可以这样做

<div style="width:100%; height: 100px;">

    <div style="width: 18%"><div style="padding: 0 10%"><div style="width:100%; height: 20px;"></div></div></div>
      <div style="width: 18%"><div style="padding: 0 10%"><div style="width:100%; height: 20px;"></div></div></div>
      <div style="width: 18%"><div style="padding: 0 10%"><div style="width:100%; height: 20px;"></div></div></div>
      <div style="width: 18%"><div style="padding: 0 10%"><div style="width:100%; height: 20px;"></div></div></div>

    </div>



在这种情况下，必须使用框大小：边框框

无法定义包含以下内容的宽度：内部宽度+填充+边框+边距

假设此html代码的示例：

<div class="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

。。。或“内联块对齐”它们（如果不需要外部边距）：

。。。或“表格>表格单元格”显示它们：

html:

除非只是为了这个例子，请将您的样式移出到外部样式表，并使用一些类/IDsbtw，1%什么？外部div的宽度还是内部div的宽度？
.wrap {
    width: 100%;
}

.item {
    float: left;
    width: 18%;
    margin: 0 1%;
}

.wrap {
    width: 100%;
    text-align: justify;
}

/* this element will force justificaton */
.wrap:after {
    content:'';
    display: inline-block;
    width: 90%;
    height: 0;
}

.item {
    display: inline-block;
    width: 18%;
}

<div class="wrap">
    <div class="item"><div></div></div>
    <div class="item"><div></div></div>
    <div class="item"><div></div></div>
    <div class="item"><div></div></div>
    <div class="item"><div></div></div>
</div>

.wrap {
    display: table;
    width: 100%;
}

.item {
    display: table-cell;
    vertical-align: top;
    width: 20%;
}

.item > div {
    display: block;
    margin: 0 1%;
}

/* optional; remove outer margins */

.item:first-child > div {
    margin-left: 0;
}

.item:last-child > div {
    margin-right: 0;
}