插入标签时的 HTML 布局怪癖

Question

我有一个由盒子组成的简单布局。

Fiddle of the code

我有 <div> <div> 内的标签标签；我正在使用它们来“定义” block ，稍后我可以在其中打印出输入。

<div class=display-window>
    <div id=pieces>
    </div>    
    <div id=vline></div>
    <div id=message>
        <p>Nothing special is going on</p>
    </div>
  </div>

当我使用 <p>元素出来了，显示没问题。但是当它在那里时，盒子会向下滑动，使其远离。 #pieces 都是如此和 #message ， 这里。 似乎 框滑动直到段落靠在其顶部。我希望盒子留在那儿。

如果可以的话，子元素不应该让他们的 parent 不受打扰吗？!这感觉很不灵活!

注意:我在 codecademy.com 和 fiddle.net 之间得到的结果大相径庭，所以我很难说出到底发生了什么。边距和填充解决了问题，但这又是不灵活的:我想在执行期间删除标签。

Answer 1

这与您的行内 block 样式元素有关。默认情况下，所有内联 block 元素都将垂直对齐设置为基线，在您的情况下是垂直线 (div# vline) 在你的 div 中间。

在 p 元素的容器上将 v-align 设置为顶部，效果很好:

#message
{
    vertical-align: top;
}

JSFiddle