简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Mengapakah apabila kita meletakkan dua div dengan paparan blok sebaris dan saiz kotak: atribut kotak sempadan bersama-sama, kawasan kosong putih muncul apabila sempadan berbeza?
P粉373596828
P粉373596828 2023-09-13 13:45:36
0
1
502

Sila pertimbangkan kod ini, mengapa d3 dan d4 tidak sejajar? Apakah ruang putih di bahagian atas d4? 

.myContainer {
  display: block;
}

#d3 {
  width: 150px;
  height: 150px;
  border: 5px solid #aef704;
  padding: 25px;
  background-color: blueviolet;
  box-sizing: border-box;
  display: inline-block;
}

#d4 {
  width: 150px;
  height: 150px;
  border: 2px solid #aef704;
  padding: 25px;
  background-color: brown;
  box-sizing: border-box;
  display: inline-block;
}
<html lang="en">

<head>
</head>

<body>
  <div class="myContainer">
    <div id="d3">test content d3</div>
    <div id="d4">test content d4</div>
  </div>
</body>

</html>

Kedua-dua 2 div ini harus memaparkan blok sebaris dan harus mempunyai lebar 150px dan ketinggian 150px, jadi mengapa div kedua lebih rendah sedikit daripada yang pertama. Inilah yang diberikan:

P粉373596828
P粉373596828

membalas semua(1)
P粉803527801
P粉8035278012023-09-14 00:15:09 Tingkat 1

Oleh kerana lalai dijajarkan secara menegak elemen sebaris ialah garis dasar. Tukarnya dengan mudah dengan menetapkannya kepada nilai seperti atas. 

.myContainer {
  display: block;
}

#d3 {
  width: 150px;
  height: 150px;
  border: 5px solid #aef704;
  padding: 25px;
  background-color: blueviolet;
  box-sizing: border-box;
  display: inline-block;
}

#d4 {
  width: 150px;
  height: 150px;
  border: 2px solid #aef704;
  padding: 25px;
  background-color: brown;
  box-sizing: border-box;
  display: inline-block;
}

#d3,
#d4 {
  vertical-align: top;
}
<div class="myContainer">
  <div id="d3">test content d3</div>
  <div id="d4">test content d4</div>
</div>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！