xピクセル後にborder-bottomを開始することはできますか？

Question

ようなオプションがあった場合、それは他の私は別のdivとborder-bottomをオーバーラップする必要があると思います、クールになる。..

Answer 1

EDIT：要素のテキストコンテンツの面でもう少しあります場合、私は、これらの日にしてください何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,およびheightルール - ここでは何も変わりません。要素の配置とサイジングのみです。

次に、このビットはbox-shadow: 0 1px 0 -1px blackです。

このぼかしなしのbox-shadowは、ボトムボーダーを作成します。 yオフセット（2番目の値）は、1px「境界線」を作成します。このyオフセットを増やすと、「境界線」の幅が広がります。これはblackボーダーですが、他のものに変更することができます。

また、ボックスシャドーが側面に表示されないように、-1pxの広がりを与えます。

最後に、私たちの要素にbackgroundを設定しました。 dimgreyですが、それ以外のもの（勾配、絵など）でもかまいません。デフォルトでは、背景も境界線の下に広がっていますが、これは望ましくありませんので、padding-boxの領域に制限しています。私はここで省略表現を使用しました。長さプロパティは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を使用することができ、あなたが擬似を使用する必要はありませんエレ。しかし、あなたのテキストは、（小さなテキストで中央揃えされていない限り）バックグラウンドの端に固執します。

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/

は、だからあなたの場合には、あなたがこのような何かを行うことができます