正确的文本与绝对位置对齐

very simple thing, but I've got lost in this ..

非常简单的事情，但我迷失了...

I have square where inside of it is heading and paragraph. What I need is simple align paragraph right under heading, but from some misterious reason there is still some space which blocks me from proper aligning. I'm using absolute positioning as you can see in code below.

我有正方形里面的标题和段落。我需要的是在标题下简单对齐段落，但是从一些神秘的原因，仍然有一些空间阻碍我正确对齐。我正在使用绝对定位，您可以在下面的代码中看到。

Thank you soo much to get me off this! :)

非常感谢你让我离开这个！ :)

SCSS

.wrapper-logo {
    position: absolute;
    border: 2px solid #fff;
    width: 230px;
    height: 230px;
    top: 24%;
    left: 60%;

    .header-logo {
        background-image:url(../img/header.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 210px;
        height: 210px;
        margin: 8px;
        border: 0;

        h1 {
            margin: 0!important;
            padding: 80px 0 0;
            vertical-align: middle;
            text-align: center;
            text-transform: uppercase;
            font-size: 220%;
            letter-spacing: 3px;
            color: $dark;
            font-weight: 500;
        }

        p {
            margin: 0!important;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 3px;
            word-spacing: 2px;
            color: $grey;
            line-height: 0px;
        }
    }
}

HTML

<div class="wrapper-logo">
    <div class="header-logo">
        <h1>My heading</h1><br>
        <p>My paragraph</p>
    </div>
</div>

2 个解决方案

#1

Try removing the <br> tag. I've set up a JSBin for you to take a look at here:

尝试删除
标记。我已经为你设置了一个JSBin来看看这里：

http://jsbin.com/jehijumayi/edit?html,css,output

#2

It was definitely the <br>...

绝对是......

.wrapper-logo {
    position: absolute;
    border: 2px solid #fff;
    width: 230px;
    height: 230px;
    top: 24%;
    left: 60%;
}
.header-logo {
        background-image:url(../img/header.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 210px;
        height: 210px;
        margin: 8px;
        border: 0;
}
 h1 {
            margin: 0!important;
            padding: 80px 0 0;
            vertical-align: middle;
            text-align: center;
            text-transform: uppercase;
            font-size: 220%;
            letter-spacing: 3px;
            color: $dark;
            font-weight: 500;
        }

        p {
            margin: 0!important;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 3px;
            word-spacing: 2px;
            color: $grey;
            line-height: 0px;
        }

        <div class="wrapper-logo">
            <div class="header-logo">
                <h1>My heading</h1>
                <p>My paragraph</p>
            </div>
        </div>

#1