内联块元素和块元素之间的空间 [英] space between an inline-block element and a block element

问题描述

这两个div之间有什么空间？我甚至删除了html中的空格。

What is that space between these two divs? I even removed the white space in html.

<div id="asd"></div><div id="psd"></div>

http://jsfiddle.net/9thpuvwa/

现在，如果第一个div（asd）有一些文本，空格就会消失; WHAT？

Now, if the first div (asd) has some text in it, the space is gone; WHAT?

<div id="asd">a</div><div id="psd"></div>

http://jsfiddle.net/kadb1d3s/

（我想了解

(I'm trying to understand my prev question)

$

#asd {
  background-color: blue;
  display: inline-block;
  width: 200px;
  height: 200px;
}

#psd {
  background-color: red;
  width: 200px;   
  height: 200px;
}

问题：这个空间来自哪里？

The question: Where that space is coming from?

推荐答案

这个空间来自哪里？

Where that space is coming from?

从 inline-block 元素对齐到line的 baseline

From the inline-block element being aligned to the baseline of the "line" it is displayed on.

添加 vertical-align：bottom （或 text-bottom 或 middle 或 top ，...） http://jsfiddle.net/9thpuvwa/2/

Add vertical-align:bottom (or text-bottom, or middle, ortop, …) to it, and the space will be gone: http://jsfiddle.net/9thpuvwa/2/

这篇关于内联块元素和块元素之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！