html - 我的 </p> 标签影响了我的 div 的位置。为什么是这样？

Question

我将此 div 夹在两个条形图(其他 div)之间，但当我将文本添加到等式中时，div 会重新定位。它在没有 p 元素及其子元素的情况下按预期工作。这是一个演示问题的 fiddle :http://jsfiddle.net/57uSQ/

这是导致问题的 HTML:

    <p>
        <span class="name">DOLCE & GABBANA</span>
        </br>
        <span class="title">THE ONE</span>
    </p>

以及相关的 CSS:

.videoDesc {
    display: inline-block;

    border: 1px solid #000000;
    border-right: 0px;

    height: 200px;
    width: 500px;
}

.videoDesc p {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.videoDesc .name {
    display: inline-block;
    padding: 0px;
}

.videoDesc .title {
    display: inline-block;
    padding: 0px;
}

.title {
    font-family: Lekton;
    font-size: 1.25em;
}

.name {
    font-family: Oswald;
    font-weight: lighter;
    font-size: 2.5em;
    letter-spacing: 10px;
    padding-left: 5px;
}

Answer 1

你需要添加vertical-align:top到.videoDesc:

.videoDesc {
    display: inline-block;
    border: 1px solid #000000;
    border-right: 0px;
    height: 200px;
    width: 500px;
    vertical-align:top;
}

jsFiddle example

默认的垂直对齐方式是基线，这是导致您看到的行为的原因。