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

Question

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

HTML code：

<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/