我的<p> </p>标签正在影响我的div的位置。为什么是这样?

时间:2014-06-25 16:22:57

标签: html css

我将这个div夹在两个条形(其他div)之间,但是当我在方程式中添加文本时,div会重新定位。它的工作原理没有p元素及其子元素。这是演示该问题的小提琴: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;
}

1 个答案:

答案 0 :(得分:3)

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

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

<强> jsFiddle example

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