html - 跨越文本边框自身重叠

Question

在我网站的管理部分，我可以编辑以前发布的博客。它工作正常但它有点难看，我找不到足够的 css 来解决这个问题。

http://jsfiddle.net/z7cgu97q/1/

基本上每个博客帖子都是这样的:

<div> 
    <span class="edit" contenteditable="true">
        this is an editable title"
    </span>
</div> 

<div> 
    <span class="edit" contenteditable="true"> 
        This paragraph contains a blog post which is editable by the user. It looks a little strange. and it looks even worse if there is a line-wrap
    </span>
</div> 

CSS 是

.edit{
    background-color:#FFD685;
    border:1px solid #998050;
    padding:3px;
}

跨度相互重叠，看起来很奇怪。如果我去掉 padding:3px; 它看起来更好，但是长帖子的文字换行看起来仍然很糟糕。最终，我希望它是线条的大小，如果有包裹，盒子的高度将包含它们之间没有边界。

Answer 1

演示:http://jsfiddle.net/z7cgu97q/3/

只需将以下代码添加到您的 CSS :

display:block;

<span>是display:inline默认情况下，因此您添加的边框和填充实际上不会影响它的大小。您看到重叠是因为边框/填充的宽度大于行高