Mengapa Margin-Top Tidak Berfungsi pada Elemen Span dalam CSS?

Margin-Top Tidak Berfungsi untuk Elemen Span: Satu Resolusi

Dalam penggayaan CSS, sifat "margin-top" sering digunakan untuk mewujudkan jarak menegak antara elemen. Walau bagaimanapun, apabila digunakan pada elemen span, ia mungkin gagal berfungsi dengan berkesan. Isu ini timbul disebabkan oleh perbezaan asas antara elemen peringkat blok dan sebaris dalam HTML.

Tidak seperti elemen div dan p, yang dikategorikan sebagai elemen peringkat blok dan mampu menerima margin pada semua sisi, span ialah elemen sebaris. Elemen sebaris mengalir secara mendatar dalam baris teks dan tidak boleh mengambil jidar menegak.

Penyelesaian:

Untuk menyelesaikan isu ini dan membolehkan penggunaan jidar menegak pada rentang elemen, anda mesti menukar sifat paparannya kepada sama ada blok sebaris atau blok. Blok sebaris membenarkan elemen berkelakuan seperti elemen sebaris sambil turut mendayakan kefungsian jidar menegak.

Kod CSS:

span.first_title {
  display: inline-block;  /* or block */
  margin-top: 20px;
  margin-left: 12px;
  font-weight: bold;
  font-size: 24px;
  color: #221461;
}

Penjelasan:

Menjadikan elemen rentang sebaris-blok mengekalkan sifat sebarisnya sambil turut memberikannya seperti blok hartanah, membolehkannya menerima margin menegak. Sebagai alternatif, jika anda menetapkan sifat paparan untuk menyekat, elemen span akan berfungsi sepenuhnya sebagai elemen blok, menduduki 100% ruang mendatar dan memaparkan pada garisan berasingan.

Nota Tambahan:

Adalah disyorkan untuk menggunakan paparan: blok sebaris untuk senario ini kerana ia mencapai keseimbangan antara sebaris dan tingkah laku blok. Dengan berbuat demikian, elemen span mengekalkan ciri sebarisnya sambil turut memperoleh keupayaan untuk menerima jidar menegak.

Atas ialah kandungan terperinci Mengapa Margin-Top Tidak Berfungsi pada Elemen Span dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!