简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
为什么当我们将两个具有display inline-block和box-sizing: border-box属性的div放在一起时，边框不同的情况下会出现白色空白区域呢？
P粉373596828
P粉373596828 2023-09-13 13:45:36
0
1
499

请考虑这段代码，为什么 d3 和 d4 没有对齐？ 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>

这 2 个 div 都应该呈现内联块，并且应该具有 150px 宽度和 150px 高度，那么为什么第二个 div 比第一个要低一点。 这是呈现的内容：

P粉373596828
P粉373596828

全部回复(1)
P粉803527801
P粉8035278012023-09-14 00:15:09 1 楼

因为内联的默认垂直对齐元素是基线。通过将其设置为类似 top 的值来轻松更改它。

.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>
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！