如何仅在 parent 之间添加水平间距，但没有兄弟姐妹
How to add horizontal spacing only between parent, but no siblings
大概是个简单的问题，但是我看不懂。在简化布局（图片）中，我需要将表格与上面 header 的内容对齐，并在兄弟姐妹之间保留水平 space。我正在为我应该使用什么而苦苦挣扎：边距、填充或它们的组合。也许，代码中还有其他缺陷，如果您注意到了，请告诉我。
我怎样才能做到这一点？
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.layout {
width: 900px;
margin: 0 auto;
}
.indicators {
display: flex;
flex-wrap: wrap;
outline: 1px dashed green;
}
table {
border-collapse: collapse;
}
.indicator__item {
margin: 10px 20px;
outline: 1px solid red;
flex: 1 1 auto;
}
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
outline: 1px dotted blue;
padding: 0 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<main class="layout">
<header class="header">
<h1>Text</h1>
<div class="combobox">
<select name="" id="">
<option value="">1</option>
</select>
<select name="" id="">
<option value="">2</option>
</select>
<button>Update</button>
</div>
</header>
<div class="indicators">
<div class="indicator__item">
<table>
<thead>
<tr>
<th>Lorem.</th>
<th>Quae!</th>
<th>Deserunt!</th>
<th>Aspernatur.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Natus.</td>
<td>Voluptatibus.</td>
<td>Modi.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Tempore.</td>
<td>Ipsam!</td>
<td>Voluptas.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Sint.</td>
<td>Error!</td>
<td>Fugit.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Aut.</td>
<td>Ipsa.</td>
<td>Suscipit!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Quis.</td>
<td>Corporis.</td>
<td>Dolorem!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Optio!</td>
<td>Veritatis?</td>
<td>Nihil?</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Nesciunt.</td>
<td>Obcaecati.</td>
<td>Error!</td>
</tr>
</tbody>
</table>
</div>
<div class="indicator__item">
<table>
<thead>
<tr>
<th>Lorem.</th>
<th>Ipsa?</th>
<th>Rerum.</th>
<th>Tempore.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Placeat.</td>
<td>Nemo.</td>
<td>Sint?</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Voluptas.</td>
<td>Sunt!</td>
<td>Earum.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Quia.</td>
<td>Vitae.</td>
<td>Officiis!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Labore?</td>
<td>Omnis!</td>
<td>Dolorum.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Nulla!</td>
<td>Laboriosam.</td>
<td>Assumenda.</td>
</tr>
</tbody>
</table>
</div>
<div class="indicator__item">
<table>
<thead>
<tr>
<th>Lorem.</th>
<th>Saepe.</th>
<th>Ipsam.</th>
<th>Quasi!</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Libero.</td>
<td>Laboriosam.</td>
<td>Deserunt!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Facere!</td>
<td>Ipsum.</td>
<td>Praesentium.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Ex.</td>
<td>Praesentium.</td>
<td>Molestias.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Natus!</td>
<td>Assumenda.</td>
<td>Consequatur.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Eveniet.</td>
<td>Nostrum.</td>
<td>Ex.</td>
</tr>
</tbody>
</table>
</div>
<div class="indicator__item">
<table>
<thead>
<tr>
<th>Lorem.</th>
<th>Esse?</th>
<th>Aperiam.</th>
<th>Laboriosam.</th>
<th>Laboriosam.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Corrupti.</td>
<td>Facere.</td>
<td>Expedita.</td>
<td>Exercitationem.</td>
<td>Expedita.</td>
<td>Quos?</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</body>
</html>
从 class .indicator__item 中删除 margin 规则 margin: 10px 20px。并在 .indicators class 中添加 gap 和 padding 规则（用于顶部和底部边距）。像这样：
.indicators {
...
gap: 20px;
padding: 20px 0;
}
我自行决定将其设置为 20px，但您可以指定任何值。 gap 值必须等于 padding 值。
片段：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.layout {
width: 900px;
margin: 0 auto;
}
.indicators {
display: flex;
flex-wrap: wrap;
outline: 1px dashed green;
gap: 20px;
padding: 20px 0;
}
table {
border-collapse: collapse;
}
.indicator__item {
/*margin: 10px 20px;*/
outline: 1px solid red;
flex: 1 1 auto;
}
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
outline: 1px dotted blue;
padding: 0 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<main class="layout">
<header class="header">
<h1>Text</h1>
<div class="combobox">
<select name="" id="">
<option value="">1</option>
</select>
<select name="" id="">
<option value="">2</option>
</select>
<button>Update</button>
</div>
</header>
<div class="indicators">
<div class="indicator__item">
<table>
<thead>
<tr>
<th>Lorem.</th>
<th>Quae!</th>
<th>Deserunt!</th>
<th>Aspernatur.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Natus.</td>
<td>Voluptatibus.</td>
<td>Modi.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Tempore.</td>
<td>Ipsam!</td>
<td>Voluptas.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Sint.</td>
<td>Error!</td>
<td>Fugit.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Aut.</td>
<td>Ipsa.</td>
<td>Suscipit!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Quis.</td>
<td>Corporis.</td>
<td>Dolorem!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Optio!</td>
<td>Veritatis?</td>
<td>Nihil?</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Nesciunt.</td>
<td>Obcaecati.</td>
<td>Error!</td>
</tr>
</tbody>
</table>
</div>
<div class="indicator__item">
<table>
<thead>
<tr>
<th>Lorem.</th>
<th>Ipsa?</th>
<th>Rerum.</th>
<th>Tempore.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Placeat.</td>
<td>Nemo.</td>
<td>Sint?</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Voluptas.</td>
<td>Sunt!</td>
<td>Earum.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Quia.</td>
<td>Vitae.</td>
<td>Officiis!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Labore?</td>
<td>Omnis!</td>
<td>Dolorum.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Nulla!</td>
<td>Laboriosam.</td>
<td>Assumenda.</td>
</tr>
</tbody>
</table>
</div>
<div class="indicator__item">
<table>
<thead>
<tr>
<th>Lorem.</th>
<th>Saepe.</th>
<th>Ipsam.</th>
<th>Quasi!</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Libero.</td>
<td>Laboriosam.</td>
<td>Deserunt!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Facere!</td>
<td>Ipsum.</td>
<td>Praesentium.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Ex.</td>
<td>Praesentium.</td>
<td>Molestias.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Natus!</td>
<td>Assumenda.</td>
<td>Consequatur.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Eveniet.</td>
<td>Nostrum.</td>
<td>Ex.</td>
</tr>
</tbody>
</table>
</div>
<div class="indicator__item">
<table>
<thead>
<tr>
<th>Lorem.</th>
<th>Esse?</th>
<th>Aperiam.</th>
<th>Laboriosam.</th>
<th>Laboriosam.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Corrupti.</td>
<td>Facere.</td>
<td>Expedita.</td>
<td>Exercitationem.</td>
<td>Expedita.</td>
<td>Quos?</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</body>
</html>
大概是个简单的问题，但是我看不懂。在简化布局（图片）中，我需要将表格与上面 header 的内容对齐，并在兄弟姐妹之间保留水平 space。我正在为我应该使用什么而苦苦挣扎：边距、填充或它们的组合。也许，代码中还有其他缺陷，如果您注意到了，请告诉我。
我怎样才能做到这一点？
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.layout {
width: 900px;
margin: 0 auto;
}
.indicators {
display: flex;
flex-wrap: wrap;
outline: 1px dashed green;
}
table {
border-collapse: collapse;
}
.indicator__item {
margin: 10px 20px;
outline: 1px solid red;
flex: 1 1 auto;
}
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
outline: 1px dotted blue;
padding: 0 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<main class="layout">
<header class="header">
<h1>Text</h1>
<div class="combobox">
<select name="" id="">
<option value="">1</option>
</select>
<select name="" id="">
<option value="">2</option>
</select>
<button>Update</button>
</div>
</header>
<div class="indicators">
<div class="indicator__item">
<table>
<thead>
<tr>
<th>Lorem.</th>
<th>Quae!</th>
<th>Deserunt!</th>
<th>Aspernatur.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Natus.</td>
<td>Voluptatibus.</td>
<td>Modi.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Tempore.</td>
<td>Ipsam!</td>
<td>Voluptas.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Sint.</td>
<td>Error!</td>
<td>Fugit.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Aut.</td>
<td>Ipsa.</td>
<td>Suscipit!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Quis.</td>
<td>Corporis.</td>
<td>Dolorem!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Optio!</td>
<td>Veritatis?</td>
<td>Nihil?</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Nesciunt.</td>
<td>Obcaecati.</td>
<td>Error!</td>
</tr>
</tbody>
</table>
</div>
<div class="indicator__item">
<table>
<thead>
<tr>
<th>Lorem.</th>
<th>Ipsa?</th>
<th>Rerum.</th>
<th>Tempore.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Placeat.</td>
<td>Nemo.</td>
<td>Sint?</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Voluptas.</td>
<td>Sunt!</td>
<td>Earum.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Quia.</td>
<td>Vitae.</td>
<td>Officiis!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Labore?</td>
<td>Omnis!</td>
<td>Dolorum.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Nulla!</td>
<td>Laboriosam.</td>
<td>Assumenda.</td>
</tr>
</tbody>
</table>
</div>
<div class="indicator__item">
<table>
<thead>
<tr>
<th>Lorem.</th>
<th>Saepe.</th>
<th>Ipsam.</th>
<th>Quasi!</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Libero.</td>
<td>Laboriosam.</td>
<td>Deserunt!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Facere!</td>
<td>Ipsum.</td>
<td>Praesentium.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Ex.</td>
<td>Praesentium.</td>
<td>Molestias.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Natus!</td>
<td>Assumenda.</td>
<td>Consequatur.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Eveniet.</td>
<td>Nostrum.</td>
<td>Ex.</td>
</tr>
</tbody>
</table>
</div>
<div class="indicator__item">
<table>
<thead>
<tr>
<th>Lorem.</th>
<th>Esse?</th>
<th>Aperiam.</th>
<th>Laboriosam.</th>
<th>Laboriosam.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Corrupti.</td>
<td>Facere.</td>
<td>Expedita.</td>
<td>Exercitationem.</td>
<td>Expedita.</td>
<td>Quos?</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</body>
</html>
从 class .indicator__item 中删除 margin 规则 margin: 10px 20px。并在 .indicators class 中添加 gap 和 padding 规则（用于顶部和底部边距）。像这样：
.indicators {
...
gap: 20px;
padding: 20px 0;
}
我自行决定将其设置为 20px，但您可以指定任何值。 gap 值必须等于 padding 值。
片段：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.layout {
width: 900px;
margin: 0 auto;
}
.indicators {
display: flex;
flex-wrap: wrap;
outline: 1px dashed green;
gap: 20px;
padding: 20px 0;
}
table {
border-collapse: collapse;
}
.indicator__item {
/*margin: 10px 20px;*/
outline: 1px solid red;
flex: 1 1 auto;
}
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
outline: 1px dotted blue;
padding: 0 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<main class="layout">
<header class="header">
<h1>Text</h1>
<div class="combobox">
<select name="" id="">
<option value="">1</option>
</select>
<select name="" id="">
<option value="">2</option>
</select>
<button>Update</button>
</div>
</header>
<div class="indicators">
<div class="indicator__item">
<table>
<thead>
<tr>
<th>Lorem.</th>
<th>Quae!</th>
<th>Deserunt!</th>
<th>Aspernatur.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Natus.</td>
<td>Voluptatibus.</td>
<td>Modi.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Tempore.</td>
<td>Ipsam!</td>
<td>Voluptas.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Sint.</td>
<td>Error!</td>
<td>Fugit.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Aut.</td>
<td>Ipsa.</td>
<td>Suscipit!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Quis.</td>
<td>Corporis.</td>
<td>Dolorem!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Optio!</td>
<td>Veritatis?</td>
<td>Nihil?</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Nesciunt.</td>
<td>Obcaecati.</td>
<td>Error!</td>
</tr>
</tbody>
</table>
</div>
<div class="indicator__item">
<table>
<thead>
<tr>
<th>Lorem.</th>
<th>Ipsa?</th>
<th>Rerum.</th>
<th>Tempore.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Placeat.</td>
<td>Nemo.</td>
<td>Sint?</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Voluptas.</td>
<td>Sunt!</td>
<td>Earum.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Quia.</td>
<td>Vitae.</td>
<td>Officiis!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Labore?</td>
<td>Omnis!</td>
<td>Dolorum.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Nulla!</td>
<td>Laboriosam.</td>
<td>Assumenda.</td>
</tr>
</tbody>
</table>
</div>
<div class="indicator__item">
<table>
<thead>
<tr>
<th>Lorem.</th>
<th>Saepe.</th>
<th>Ipsam.</th>
<th>Quasi!</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Libero.</td>
<td>Laboriosam.</td>
<td>Deserunt!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Facere!</td>
<td>Ipsum.</td>
<td>Praesentium.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Ex.</td>
<td>Praesentium.</td>
<td>Molestias.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Natus!</td>
<td>Assumenda.</td>
<td>Consequatur.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Eveniet.</td>
<td>Nostrum.</td>
<td>Ex.</td>
</tr>
</tbody>
</table>
</div>
<div class="indicator__item">
<table>
<thead>
<tr>
<th>Lorem.</th>
<th>Esse?</th>
<th>Aperiam.</th>
<th>Laboriosam.</th>
<th>Laboriosam.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Corrupti.</td>
<td>Facere.</td>
<td>Expedita.</td>
<td>Exercitationem.</td>
<td>Expedita.</td>
<td>Quos?</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</body>
</html>