angularjs - 为什么 P 标签不占据行的整个高度？

Question

你能告诉我为什么P标签不占据行的整个高度吗？实际上我的行中有p标签，其中文本是“P”，只有背景色浅蓝色。它没有占据行的整个高度如图所示？ 我会尝试用其他语言进行更多解释。

• 我正在尝试制作一行，如图所示。它在图像“左”一个中有“P”文本。它没有占据行的整个高度，如图所示
• 我的右侧有一个圆圈，里面有一些文字“650”。为什么它没有显示在中心？

笨蛋

http://plnkr.co/edit/ilmNaeyjFZCcSnb2PWcO?p=preview

.bg {
    background: lightgray;
    position: relative;
}
.ptag {
    position: absolute;
    margin-left: -7%;
    width: 7%;
    border: 1px solid red;
    height: 100%;
    background: lightblue;
    color: white;
}
.circle{
    width: 50px;
    height: 50px;
    float: right;
    border-radius: 100%;
    background: green;
    margin-top: -7%;
    color:black!important;
}

Answer 1

.ptag {
    position: absolute;
    top:0; /* set at top */
    margin-left: -7%;
    width: 7%;
    border: 1px solid red;
    height: 100%;
    background: lightblue;
    color: white;
    text-align: center;
}
.circle{
    width: 50px;
    height: 50px;
    float: right;
    border-radius: 100%;
    background: green;
    margin-top: -7%;
    color:black!important;
    text-align: center;
    line-height: 50px; /* same as height */
}

Plunker Demo