如果我有一个像下面这样的元素列表，并且我使用flexbox来定位它们，以便它们都水平对齐并且占据相等的空间。 我想对内部元素应用一个边距，使它们之间有一个微小的差距。
但是，我也不希望边距应用于外部的两个元素，因为这会导致不对齐，因为我们通过给外部元素一个边距将它们向内推。
本质上，我希望内部的两个元素有一个左右边距，而第一个元素有一个右边距，最后一个元素有一个左边距。 这样所有的边距都是相等的，但是元素的外部没有边距。
你可以通过在特定的卡片上应用个人风格来实现，但我只是想知道是否有比这更好的方法来实现它。
<div class="service-card-container">
<mat-card class="service-card" style="margin-right: 10px;">
<p>Card</p>
</mat-card>
<mat-card class="service-card" style="margin-right: 10px;margin-left: 10px;">
<p>Card</p>
</mat-card>
<mat-card class="service-card" style="margin-right: 10px;margin-left: 10px;">
<p>Card</p>
</mat-card>
<mat-card class="service-card" style="margin-left: 10px;">
<p>Card</p>
</mat-card>
</div>
可以用父元素上相同金额的负边距来抵消第一个和最后一个元素的边距:
.service-card-container {
margin-left: -10px;
margin-right: -10px;
}
.service-card {
margin-left: 10px;
margin-right: 10px;
}
…或者，您可以将第一个和最后一个元素作为目标，并分别移除它们的左右边距。
.service-card {
margin-left: 10px;
margin-right: 10px;
}
.service-card:first-child {
margin-left: 0;
}
.service-card:last-child {
margin-right: 0;
}
像这样的东西怎么样:
.service-card {
margin-right: 20px;
}
.service-card:last-child {
margin-right: 0;
}
通过这种方式，您可以使用20px的右边距值对所有mat-card项进行样式设置。 然后，您可以从最后一个mat-card中删除右边距值，从而确保容器内的项目之间有一致的边距，同时确保最后一个项目上没有泄漏边距。
