是否可以在x個像素之後開始border-bottom？

Question

這將是冷靜，如果有這樣的選擇，否則我將不得不重疊border-bottom與另一格..

Answer 1

編輯：我會做什麼，這些天，如果有在元素的文本內容方面是有點多是使用box-shadow和background-clip。否則，請參閱我原始答案中的最後一個解決方案。

div { 
 
    border-bottom: solid .75em transparent; 
 
    margin: 7em auto 1em; 
 
    width: 10em; height: 5em; 
 
    box-shadow: 0 1px 0 -1px black; 
 
    background: dimgrey padding-box; 
 
}

<div></div>

讓我們來剖析以上。

首先，border-bottom: solid .75em transparent。

border-bottom區域將成爲缺口區域。這就是爲什麼我們要透明。更改此邊框的寬度會改變間隙的寬度。

margin,width和height規則 - 這裏沒什麼奇怪的，只是定位和調整元素大小。

然後我們有這個位：box-shadow: 0 1px 0 -1px black。

這個沒有模糊的box-shadow創建底部邊框。 y偏移量（第二個值）創建一個1px「邊界」。增加這個y偏移增加了我們的「邊界」的寬度。這是一個black邊界，但我們可以將其更改爲其他任何內容。

我們也不希望我們的箱形陰影顯示在兩側，所以我們給它一個-1px傳播。

最後，我們在我們的元素上設置了一個background。這是一個dimgrey之一，但它可以是其他任何東西（漸變，圖片，不管）。默認情況下，背景也會在邊界下延伸，但我們不希望這樣，所以我們將其限制在padding-box的區域。我在這裏使用了速記。該longhand屬性是background-clip，你可以找到它的工作原理的詳細解釋和其他與this article（免責聲明：我寫的）類似的例子。

---

這裏是原來的答案

你可以使用一個僞元素。絕對定位，100％寬度，低於元素底部的偏移量。

demo

HTML：

<div></div> 

CSS：

div { 
    position: relative; 
    margin: 7em auto 1em; 
    width: 10em; height: 5em; 
    background: dimgrey; 
} 
div:after { 
    position: absolute; 
    bottom: -.8em; 
    width: 100%; 
    border-bottom: solid 1px; 
    content: ''; 
} 

---

或者你可以使用background-clip: content-box，你將不再需要使用僞ELE換貨。但是，那麼你的文本將堅持到背景的邊緣（除非它是一個小文本和居中）。

demo

相關CSS：

div { 
    margin: 7em auto 1em; 
    padding: 0 0 .8em; 
    border-bottom: solid 1px; 
    width: 10em; height: 5em; 
    background: dimgrey content-box; 
} 

Answer 2

可以使用的填充。

padding: 10px; // push 10px the content 
border: 1px solid #fff; 

Answer 3

保證金和填充是在圖像周圍或對象空格。

正如您在圖像中看到的，填充是內容和您定義的邊框之間的空間，而不是邊框​​之間的空間，邊框和此對象旁邊的其他元素之間的空間。

所以你的情況，你可以做這樣的事情：

HTML：

<div id="box"></div> 

CSS：

#box{ 
    background: url(image.jpg) no-repeat; 
    height: 100px; 
    width: 100px; 
    border-bottom: 1px solid #333; 
    padding-bottom: 10px; 
} 

在這裏你可以找到一個簡單的例子：http://jsfiddle.net/k7QcN/