html - 仅为 div 的外边框设置边距

Question

我在 flex 盒容器中有三列。我在它们周围添加了边距，但我只想为内部边框应用一个边距。我想可以使用 :before 和 :after，但我是新手 :)

.flex-grid {
  display: flex;
  width: 100%;
  justify-content: space-between;
  text-align: center;
}

button {
  text-align: center;
  margin: 15px 5px;
  padding: 10px 50px;
  border: none;
  color: white;
  background-color: cadetblue;
  border-radius: 10px;
}

.col {
  background: pink;
  flex: 1;
  width: 330%;
  margin: 50px;
  padding: 20px;
  border: solid 1px none;
  border-radius: 30px;
}

<div class="flex-grid">
  <div class="col">Need gutters? You could add margins to the columns. You could add padding to the columns. I like the idea of using justification to create the columns, like:<button>Procitaj ...</button></div>
  <div class="col">Need gutters? You could add margins to the columns. You could add padding to the columns. I like the idea of using justification to create the columns, like:
    <br/><button>Procitaj ...</button></div>
  <div class="col">Need gutters? You could add margins to the columns. You could add padding to the columns. I like the idea of using justification to create the columns, like:<button>Procitaj ...</button></div>
</div>

Answer 1

使用 :nth-child(2) 选择器，您可以将 2 列作为目标并移除那 50px 的边距。

.flex-grid {
  display: flex;
  width: 100%;
  justify-content: space-between;
  text-align: center;
}

button {
  text-align: center;
  margin: 15px 5px;
  padding: 10px 50px;
  border: none;
  color: white;
  background-color: cadetblue;
  border-radius: 10px;
}

.col {
  background: pink;
  flex: 1;
  width: 330%;
  margin: 50px;
  padding: 20px;
  border: solid 1px none;
  border-radius: 30px;
}

.col:nth-child(2) {
  margin: 50px 0px;
}

<div class="flex-grid">
  <div class="col">Need gutters? You could add margins to the columns. You could add padding to the columns. I like the idea of using justification to create the columns, like:<button>Procitaj ...</button></div>
  <div class="col">Need gutters? You could add margins to the columns. You could add padding to the columns. I like the idea of using justification to create the columns, like:
    <br/><button>Procitaj ...</button></div>
  <div class="col">Need gutters? You could add margins to the columns. You could add padding to the columns. I like the idea of using justification to create the columns, like:<button>Procitaj ...</button></div>
</div>