Rumah >hujung hadapan web >html tutorial >Bagaimana untuk mengalih keluar ruang antara elemen sebaris/sebaris dalam HTML?
Bagaimana untuk mengalih keluar ruang antara elemen sebaris/sebaris dalam HTML?
- WBOYke hadapan
- 2023-09-14 20:21:04788semak imbas
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;
}
Kami telah menetapkan gaya di atas untuk elemen
<nav> <a href="#">Tutorials</a> <a href="#">point</a> </nav>
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>
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>
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>
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!