CSS - 短边框线？

Question

我在几个仅在左侧的 DIV 上有一个边框。

CSS:

#Mid-Content_ {

    position: absolute;
    left: 510px;
    top: 119px;
    height: 70%;
    border-left: #CCC 2px solid;
    width: 250px;
    padding-left: 10px;
}

边框从左侧的顶部到底部，这正是根据 CSS 代码应该做的。

有没有办法让它更短，比如从顶部和底部相距 10px？问题是 DIV 内的文本需要与此边框线内联。

Answer 1

看看这个fiddle

HTML

<div id="contentArea">
         <div id="border"></div>
         text text text text text text text text text text
</div>

CSS

   #contentArea {
     height: 100px;
     width: 80px;
     position: relative;
     background: #3beadc;
     padding:5px;
     }

   #border  {
     border-left: 2px solid #f51c40;
     position: absolute;
     top: 10px;
     bottom: 10px
     left:0px;
   }

如果您希望边框位于 contentArea 之外，请将其左侧值更改为负数*边框宽度* 例如left:-2px; 在上面的例子中