block element and a block element

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/

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)

CSS

#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?

---

This appears to be caused by the vertical alignment. Where it's set to inline-block , by default the vertical alignment is set to baseline , which is slightly higher raised (probably to account for characters like 'y' and 'g' which dip below the line).

vertical-align of top seems to fix it:

#asd {
  ...
  vertical-align: top;
}

JSFiddle demo .

---

Where that space is coming from?

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

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

链接地址: http://www.djcxy.com/p/15794.html

上一篇: 跨浏览器rgba透明背景，同时保持内容（文本和图像）不是

下一篇: 块元素和块元素