为什么里面带有 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?为什么里面带有 p 标签的 html div 标签与里面带有 img 标签的位置不同？
【发布时间】：2015-04-21 21:37:33
【问题描述】：

我在 Codecademy.com 工作时编写了以下代码。基本上我有一堆用<div> 标签创建的圆形容器。所有的容器在空的时候都整齐地排成一排。当我在一些<div>s 中添加图像时，它并没有影响间距。但是，当我在<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>

【问题讨论】：

标签： html css spacing paragraph

【解决方案1】：

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

在这种情况下，以下方法会起作用：

Example Here

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

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

【讨论】：

谢谢乔希！这完全解决了我的问题并帮助我理解了背后的原因！你摇滚。

【解决方案2】：

因为有一种叫做紧急样式表的东西，那就是给原始标签，例如<p> or <a> or <html> or <h1> 等..... 而<p> 总是给文本空间。

所以对您来说最好的解决方案是为<p> 插入一个样式如果您对职位有疑问，可以使用padding , margin, 加上您可以随意调整大小，这是一种新样式

【讨论】：