Terdapat padding antara elemen tetapi tidak pada kedua-dua belah

Question

Saya sedang mencipta kad dengan tajuk dan di bawahnya adalah kad lain dalam 2 lajur. Masalahnya ialah saya mahu padding antara elemen, bukan di sekelilingnya, sekurang-kurangnya tidak di sisi, kerana itu akan menjadikan tajuk tidak konsisten dengan kotak di bawah. Inilah yang saya mahukan:

Saya cuba memberikan setiap kad hijau padding yang berbeza, jadi padding kiri atas ialah 0 1em 1em 0, padding kanan atas ialah 0 0 1em 1em dan seterusnya. Ia akan menjadi lebih bersih jika saya boleh mempunyai penyelesaian umum yang mengandungi sebarang bilangan kad, lajur, baris, dan bukannya padding "berkod keras" seperti ini. adakah mungkin?

Satu penyelesaian adalah dengan meletakkan tajuk, tetapi ini terasa seperti penyelesaian yang buruk.

Padding atas dan bawah boleh wujud, cuma saya tak boleh letak kiri kanan kalau lebih senang.

Kod berkaitan:

.content-card {
  width: 100%;
  padding: 2em 2em 2em;
  background: black;
}

.service-card {
  max-width: 100%;
  padding: 1em 1em 1em;
  background: grey;
  border-radius: 0.25em;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column-2x2 {
  display: flex;
  flex-direction: column;
  flex-basis: 45%;
  padding: 1em 1em 1em;
}

<div class="content-card">
  <h2 style="color:white; font-size: 36px">Services.</h2>
  <br>
  <div class='row'>
    <div class='column-2x2'>
      <div class="service-card">
        <h3 class="">Service 1.</h3>
      </div>
    </div>
    <div class='column-2x2'>
      <div class="service-card">
        <h3 class="">Service 2.</h3>
      </div>
    </div>
    <div class='column-2x2'>
      <div class="service-card">
        <h3 class="">Service 3.</h3>
      </div>
    </div>
    <div class='column-2x2'>
      <div class="service-card">
        <h3 class="">Service 4.</h3>
      </div>
    </div>
  </div>
</div>

Answer 1

Saya rasa cara paling mudah untuk menyelesaikan masalah ini ialah menambah ini,

justify-content: space-between;
align-content: space-between;

Ke bekas Flex anda (dalam kes ini teg div dengan kelas kad merah). Sila cuba yang ini di bawah.

.red-card{
    height: 350px;
    width: 250px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    border: 3px solid red
}
.green-card{
    height: 150px;
    width: 100px;
    border: 3px solid green
}

TITLE IS HERE

    

      

      

      

  

Answer 2

Grid adalah penyelesaian kepada masalah ini. grid-template-columns 告诉浏览器将 div 间隔两行（如果您想要三列，只需指定三个宽度 - 如果您想让多列具有相同的宽度，您也可以使用 repeat() ）。然后使用 ngap Tukar ruang antara.

Petua CSSmempunyai pengenalan yang baik kepada grid, Kevin Powell juga mempunyai pengenalan yang baik untuk ini

.title-container {
  padding: 0.5rem 1.5rem;
  border: 2px solid black;
  color: red;
  width: fit-content;
}

.container {
  display: grid;
  width: fit-content;
  grid-template-columns: 5rem 5rem;
  gap: 0.5rem;
  outline: 2px solid red;
  margin-block: 0.5rem;
}

.container>div {
  height: 7rem;
  border: 2px solid #22B14C;
}

  TITLE IS HERE