Question

我想为段落设置左边框，但由于线条高度，边框有额外的高度。我想删除超出文本顶部和底部的边框高度。看截图： enter image description here

我已尝试了几个mothds，例如将段落包含在div中并设置负边距，但似乎没有效果。

这里简单的css：

p{
    margin: 20px;    
    line-height: 2;    
    border-left: 5px solid green;
}

演示： http://jsfiddle.net/0et4gq16/

编辑：不应更改行高。

Answer 1

手动绘制线条！

p{
    margin: 20px;    
    line-height: 2;
    position: relative;
}
p:after {
    content: " ";
    display: block;
    width: 5px;
    background: green;
    position: absolute;
    left: -5px;
    top: 0.5em;
    bottom: 0.5em;
}

fiddle

Answer 2

如果您不愿意更改line-height财产，那么我担心这是不可能的。

margin属性定义带边框的p与“世界”其余部分之间的空格。但是line-height在之前是空格，在之后是，不在之间。

因此，边界尽可能接近文本，并考虑line-height。

Answer 3

要删除上方的边框 p，您可以添加以下css：

p::first-line{
    line-height: 1;
}

这会缩小第一行和第二行之间的行高。

<强> DEMO

Answer 4

如果不用css改变行高，就不可能......如果你愿意的话，你可以改变它的形象

Answer 5

肮脏，但它符合要求

<div>
    <div id="border"><div>
    <div id="content">
        <p>Nulla accumsan massa blandit ligula pellentesque dictum. Cras blandit lorem quis ultrices faucibus. Phasellus sed odio vulputate, euismod dui ac, dapibus justo. </p>
    </div>
</div>

用css：

p{
    margin: 20px;    
    line-height: 2;     
}
#border{
    display:inline-block;
    border-right:5px solid green;
    width:5px;
    margin:20px;
}
#content{
    display:inline-block;
    width:400px;
    margin:-30px 0 -30px -8px;
}

http://jsfiddle.net/0et4gq16/4/

删除由行高引起的额外边框

5 个答案: