html - 带有边框和填充的内联 div 块导致 div 超出页边距

Question

如何防止顶部边缘在此代码中被切断：http: //jsfiddle.net/ebW6F/？

HTML 代码：

<div id="text">
    abcd efgh
</div>

CSS 代码：

#text {
    display: inline;
    border: 3px solid black;
    padding: 10px;
    font-size: 40px;
}

Answer 1

这是一种方法：

#text {
    display: inline-block;
    border: 3px solid black;
    padding: 10px;
    font-size: 40px;
}

Answer 2

由于您似乎正在创建某种类型的盒子，请使用display:inline-block而不是仅使用display:inline.

见：http: //jsfiddle.net/ebW6F/2/