Tolong beri saya ruang

Terdapat pelbagai cara untuk melakukannya. Sesetengah yang lebih disarankan dan lebih sesuai untuk situasi tertentu daripada yang lain, tentu saja.

Kami boleh melakukannya secara langsung di HTML:

 <p> Kami pergi dari satu baris ... <br> <br> turun beberapa lagi. </p>

Tetapi itulah yang CSS benar -benar untuk:

 <p> Kami pergi dari satu baris ... <span> turun beberapa lagi. </span> </p>

 rentang {
  paparan: blok;
  margin-block-start: 1.5rem;
}

Ketinggian garis juga boleh memberi kita ruang pernafasan tambahan di antara garis teks:

 p {
  Talian ketinggian: 1.35;
}

Oleh kerana kita bercakap teks, terdapat juga surat-surat dan kata-kata, belum lagi inden teks:

Tetapi mari kita bercakap kotak dan bukannya teks. Katakan kita mempunyai dua div sederhana:

 <div> twiddle dee </div>
<div> twiddle dum </div>

Mereka adalah tahap blok sehingga mereka sudah berada di garis yang berbeza. Kita boleh mencapai margin lagi. Atau kita boleh membuat kesan ruang dengan padding. Saya rasa kita boleh menterjemahkan penyedut itu ke arah yang sama:

 Div: nth-child (2) {
  Transform: Translate (100px);
}

Tetapi mungkin unsur -unsur itu benar -benar diposisikan supaya kita boleh menggunakan offset fizikal:

 div {
  Kedudukan: Mutlak;
}
Div: nth-child (1) {
  inset: 0;
}
Div: nth-child (2) {
  Inset-inline-start: 100px; /* atau atas: 100px; */
}

Jika kita bekerja dalam bekas grid, maka kita mendapat jurang-umur:

 <section>
  <div> twiddle dee </div>
  <div> twiddle dum </div>
</section>

 Bahagian {
  paparan: grid;
  Grid-template-lajur: 1FR 1FR;
  Gap: 100px;
}

Perjanjian yang sama dengan bekas yang fleksibel:

 Bahagian {
  Paparan: Flex;
  Gap: 100px;
}

Semasa kami bekerja di grid dan bekas yang fleksibel, kami boleh memanggil mana -mana harta penjajaran untuk menjana ruang.

 Bahagian {
  Paparan: Flex;
  Align-item: ruang-antara;
  Justify-Content: Space-antara;
}

Terdapat jadual, tentu saja:

 <jadual selpacing="100">
  
  <tbody>
    <tr>
      <td> twiddle dee </td>
      <td> twiddle dum </td>
    </tr>
  </tbody>
</jadual>

Atau pendekatan CSS-Y:

 /* Kita boleh menggunakan `paparan: jadual` jika kita tidak bekerja dalam elemen jadual. */
Jadual {
  Sempadan-jarak: 100px;
}

Mari kita pergi lebih jauh ke medan kiri. Kita boleh membuat satu elemen kelihatan seperti dua menggunakan kecerunan linear dengan perhentian warna keras:

 div {
  imej latar belakang:
    Linear-Gradient (
      ke kanan,
      RGB (255 105 0/1) 50%,
      RGB (207 46 46/1) 50%,
      RGB (207 46 46/1) 100%
    );
}

Kemudian kami membuat kepala palsu dan memasukkan warna telus yang keras di antara kedua -dua warna:

Selagi kita fakin 'bacon di sini, mungkin juga melemparkan trik sempadan "telus":

Mari kembali ke teks sebentar. Mungkin kita mengapung elemen dan mahu teks membungkusnya ... dalam bentuk elemen terapung sambil meninggalkan ruang antara keduanya. Kami mempunyai margin bentuk untuk itu:

Berani saya juga menyebut hari spacer.gif?

 <div> twiddle dee </div>
<img  src="spacer.gif" alt="Tolong beri saya ruang" > 
<div> twiddle dum </div>

Mesti lebih banyak lagi

Anda semua sekumpulan pintar dengan idea yang hebat. Ada!

Atas ialah kandungan terperinci Tolong beri saya ruang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!