为什么其中带有 p 标签的 html div 标签与带有 img 标签的标签位置不同？

Question

我在 Codecademy.com 上工作时编写了以下代码。基本上我有一堆用 <div> 标签创建的圆形容器。所有的容器在空的时候都整齐地排成一排。当我在某些 <div> 中添加图像时，它不会影响间距。但是，当我在其中一个 <div> 容器内的 <p> 标记内添加文本时，它使整个容器向下移动了半英寸。（注意：删除或添加更多 <br> 标签无济于事，将边距设置为 0 也无济于事。）

我的问题是：为什么会发生这种情况，我怎样才能阻止它发生？

因为我这样做是为了学习，所以我肯定更关心理解为什么会发生这种情况，而不是简单地快速解决问题。谢谢。

代码如下：

div {
  display: inline-block;
  margin-left: 5px;
  border-radius: 100%;
  height: 100px;
  width: 100px;
  border: 2px solid black;
}
.friend {
  border: 2px dashed #008000;
}
.family {
  border: 2px dashed #0000ff;
}
.enemy {
  border: 2px dashed #ff0000;
}
#best_friend {
  border: 4px solid #00c957;
}
#archnemesis {
  border: 4px solid #cc0000;
}
img {
  border-radius: 100%;
  height: 100px;
  width: 100px;
}
div p {
  text-align: center;
  border: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css" />
  <title>My Social Network</title>
</head>

<body>
  <div class="friend" id="best_friend">
    <img src="http://www.smashbros.com/images/og/link.jpg" />
  </div>
  <div class="friend">
    <img src="http://upload.wikimedia.org/wikipedia/commons/9/9e/Navi_oOot.png" />
  </div>
  <div class="family">
    <img src="http://fc07.deviantart.net/fs70/i/2011/196/c/a/deku_tree_manip_by_thegeminisage-d3u262q.jpg" />
  </div>
  <div class="family">
    <br>
    <p>Forest elf guy number 7</p>
  </div>
  <div class="enemy" id="archnemesis">
    <img src="#" />
  </div>
  <div class="enemy">
    <img src="#" />
  </div>
</body>

</html>

Answer 1

要解决此问题，您可以将 vertical-align 属性更改为默认值以外的值，即 baseline.

在这种情况下，以下方法可行：

Example Here

div {
    display: inline-block;
    vertical-align: top;
    /* other styling.. */
}

至于 为什么 该元素比其他元素低的原因，是因为文本与同级元素的基线对齐。请注意，如果您 remove the text，则不会再出现此问题。由于元素是 inline-block，更改 vertical-align 属性将对其产生影响。另一方面，如果元素是浮动的，您也不会看到这个问题。

Answer 2

因为有一种叫做紧急风格的东西 sheet，它正在为 <p> or <a> or <html> or <h1> 等原始标签提供...... <p> 总是给出文本 space.

所以最适合您的解决方案是为 <p> 插入一个样式如果您对位置有疑问，可以使用 padding , margin, 并且您可以根据需要调整大小，这是一种新样式

为什么其中带有 p 标签的 html div 标签与带有 img 标签的标签位置不同？

Why does a html div tag with a p tag inside it sit differently than one with an img tag inside it?

html

css

spacing

paragraph