CSS - 短邊界線？

我在只有左側的幾個DIV上有邊框。CSS - 短邊界線？

CSS：

#Mid-Content_ { 

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

邊境從頂部的左側，這正是它應該根據CSS代碼做的底部去。

有沒有辦法讓它更短，比如從頂部和底部說10px？問題是DIV中的文本需要與此邊界線內聯。

來源

2013-11-14 user2987337

看一看這個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; 
    }

如果你想在邊界成爲含量 - 面積外，其左值更改爲負 *邊界寬度*例如left:-2px;在上述情況下

來源

2013-11-14 14:49:26 SW4

啊我明白了。謝謝！ – user2987337

否，邊界將始終擴展元素的全長或寬度（例如，內容+填充，但不包括邊距）。然而，你總是可以封閉div中的文本在p標籤，其語義正確反正和邊境添加到代替：

#Mid-Content_ p { 
    padding: 0; 
    border-left: 2px solid #CCC; 
}

此外，在div邊界應與文本內聯無論如何（或者如果你沒有在div上設置明確的高度），假設你有一個正常的ish line-height，並且div上沒有頂部或底部填充。

來源

2013-11-14 14:50:25 Ennui

謝謝。雖然內容是少數標題，圖像和文字。我發現我需要添加另一個DIV邊框。 – user2987337

CSS - 短邊界線？

回答

相關問題