Bagaimana untuk mengalih keluar ruang antara elemen sebaris/sebaris dalam HTML?-html tutorial-php.cn

Bagaimana untuk mengalih keluar ruang antara elemen sebaris/sebaris dalam HTML?

WBOY

Lepaskan： 2023-09-14 20:21:04

ke hadapan

787 orang telah melayarinya

Bagaimana untuk mengalih keluar ruang antara elemen sebaris/sebaris dalam HTML?

Kami boleh mengalih keluar ruang antara elemen blok sebaris dengan mudah. Sebelum meneruskan, mari kita buat dokumen HTML dahulu dan tambah elemen blok sebaris dengan ruang.

Elemen blok sebaris dengan ruang

Kami akan menggayakan elemen blok sebaris menggunakan atribut paparan dengan nilai blok sebaris -

nav a {
   display: inline-block;
   background: blue;
   color: white;
   text-decoration: none;
   font-size: 35px;
}

Salin selepas log masuk

Kami telah menetapkan gaya di atas untuk elemen

yang diberikan di bawah -

<nav>
   <a href="#">Tutorials</a>
   <a href="#">point</a>
</nav>

Salin selepas log masuk

Sekarang mari kita lihat contoh lengkap menambahkan elemen blok sebaris dengan ruang -

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements</title>
   <style>
      nav a {
         display: inline-block;
         background: blue;
         color: white;
         text-decoration: none;
         font-size: 35px;
      }
   </style>
</head>
<body>
   <h1>The inline-block elements</h1>
   <p>Below are the inline-block elements with space:</p>
   <nav>
      <a href="#">Tutorials</a>
      <a href="#">point</a>
   </nav>
</body>
</html>

Salin selepas log masuk

Gunakan atribut saiz fon untuk mengalih keluar ruang antara elemen blok sebaris

Kita boleh menggunakan atribut saiz fon untuk mengalih keluar ruang antara elemen blok sebaris. Atribut saiz fon mempengaruhi saiz teks elemen. Berikut adalah nilai yang mungkin -

xx-small - Menetapkan saiz teks elemen supaya lebih kecil daripada saiz yang dihasilkan oleh nilai x-small.
x-small - Menetapkan saiz teks elemen menjadi lebih kecil daripada saiz yang dihasilkan oleh nilai kecil.
small - Menetapkan saiz teks elemen supaya lebih kecil daripada saiz yang dihasilkan oleh nilai median.
medium - Menetapkan saiz teks elemen menjadi kurang daripada saiz yang dihasilkan oleh nilai besar, dan lebih besar daripada saiz yang dihasilkan oleh nilai kecil.
large - Menetapkan teks elemen kepada saiz yang lebih besar daripada hasil median.
x-large - Menetapkan saiz teks elemen supaya lebih besar daripada saiz yang dihasilkan oleh nilai besar.
xx-large - Menetapkan saiz teks elemen menjadi lebih besar daripada saiz yang dihasilkan oleh nilai xlarge.
larger - Menetapkan teks elemen menjadi lebih besar daripada teks elemen induknya.
smaller - Menetapkan teks elemen menjadi lebih kecil daripada teks elemen induknya.
panjang - sebarang nilai panjang yang dibenarkan. saiz fon tidak membenarkan nilai panjang negatif.
Peratusan - Menetapkan saiz teks sesuatu elemen berbanding dengan elemen induknya.

Sekarang mari kita lihat contoh mengalih keluar ruang antara elemen blok sebaris -

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements without space</title>
   <style>
      nav {
         font-size: 0;
      }
      nav a {
         display: inline-block;
         background: blue;
         color: white;
         text-decoration: none;
         font-size: 35px;
      }
   </style>
</head>
<body>
   <h1>The inline-block elements</h1>
   <p>Below are the inline-block elements without space:</p>
   <nav>
      <a href="#">Tutorials</a>
      <a href="#">point</a>
   </nav>
</body>
</html>

Salin selepas log masuk

Gunakan atribut kanan margin untuk mengalih keluar ruang antara elemen blok sebaris

Kita boleh menggunakan sifat margin-kanan untuk mengalih keluar ruang antara elemen blok sebaris -

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements without space</title>
   <style>
      nav a {
         display: inline-block;
         background: blue;
         margin-right: -4px;
         color: white;
         text-decoration: none;
         font-size: 35px;
      }
   </style>
</head>
<body>
   <h1>The inline-block elements</h1>
   <p>Below are the inline-block elements without space:</p>
   <nav>
      <a href="#">Tutorials</a>
      <a href="#">point</a>
   </nav>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar ruang antara elemen sebaris/sebaris dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!