为什么带有文本的div不遵循内联块模式？

I have a series of divs that have images in them. Here's the CSS:

我有一系列有图像的div。这是CSS:

p.titles-box {
  font-family: 'Roboto', 'Helvetica', Arial, sans-serif;
  font-size: 12pt;
  color:black;
  font-weight:300;
}
#a {
  display:inline-block;
  width:200px;
  height:200px;
  background-size: cover;
  margin: 20px 20px 20px 20px;
  border-radius: 15px;
  cursor:pointer;
  opacity: 0.7;
  transition: opacity 0.5s ease;
}
#a:hover {
  opacity: 1;
}

for images in the html I do as follows:

对于html中的图像我做如下:

<div id="a" style="background-image:url('asdfasd.png')"></div>

and for text I do as follows:

对于文本,我做如下:

<div id="a" style="background-color:white"><p class="titles-box">WordsWordsWords WordsWordsWords</p></div>

And yet only the divs with text end up off-grid. Any reason why?

然而,只有带文本的div最终离网。有什么理由吗?

Thanks!

Here's a pic of the issue: http://i.imgur.com/e5AdR27.png

以下是该问题的图片:http://i.imgur.com/e5AdR27.png

1 个解决方案

#1

This is because the alignment of the two elements(text and none)is different.

这是因为两个元素(文本和无)的对齐是不同的。

To solve it, add vertical-align: top; to #a css.

要解决它,添加vertical-align:top;到#a css。

#a {
  display:inline-block;
  width:200px;
  height:200px;
  background-size: cover;
  margin: 20px 20px 20px 20px;
  border-radius: 15px;
  cursor:pointer;
  opacity: 0.7;
  transition: opacity 0.5s ease;
  vertical-align: top;
}

#1