Question

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

我的问题是：为什么会发生这种情况，如何阻止它发生？

由于我这样做是为了学习，所以我更关心理解为什么会发生这种情况，而不仅仅是快速解决问题。谢谢。

以下是代码：

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

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

因为有一些叫做紧急样式表的东西，那就是给出<p> or <a> or <html> or <h1>等原始标签..... 并且<p>始终给出文本空间。

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

为什么里面带有p标签的html div标签与其中包含img标签的标签不同？

2 个答案: