web-dev-qa-db-ja.com

境界線をdivの内側ではなくその内側に配置する

私は<div>要素を持っていて、それに枠を付けたいのです。私はstyle="border: 1px solid black"を書くことができることを知っています、しかしこれはdivの両側に2pxを追加します、それは私が欲しいものではありません。

私はむしろこの境界線をdivの端から-1pxにしたいと思います。 div自体は100px x 100pxです、そして私がボーダーを追加するならば、そして私はボーダーが現れるようにするためにいくつかの数学をしなければなりません。

ボーダーを表示させて、ボックスが100px（ボーダーを含む）のままになるようにする方法はありますか。

htmlcsscss3border
418
TheMonkeyMan

box-sizingプロパティをborder-boxに設定します。

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}
<div>Hello!</div>
<div>Hello!</div>

IE8以上 で動作します。

592
sandeep

このようにbox-shadowを使うこともできます。

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

ここでの例： http://jsfiddle.net/nVyXS/ （ボーダーを表示するにはホバー）

これは最近のブラウザでのみ動作します。例えば、_ IE 8はサポートされません。 caniuse.com（ボックスシャドウ機能）を参照してください 詳細については/。

305
caitriona

おそらくそれは遅れている答えですが、私は私の調査結果と共有したいと思います。私は答えでここで見つけなかったこの問題への2つの新しいアプローチを見つけました：

box-shadow cssプロパティによる内側境界

はい、box-shadowは要素にbox-shadowを追加するのに使われます。しかし、inset shadowを指定することもできます。これは、影のような内側の境界のように見えます。水平方向と垂直方向の影を0pxに設定し、box-shadowの "spread"プロパティを希望する境界線の幅に設定するだけです。したがって、10pxの「内側の」境界には、次のように書きます。

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

これが jsFiddle の例です。これはbox-shadowボーダーと '通常の'ボーダーの違いを示しています。このようにあなたのボーダーとボックスの幅はボーダーを含めて合計100pxです。

ボックスシャドウについての詳細： ここ

アウトラインcssプロパティによる境界

これは別のアプローチですが、このようにして境界はボックスの外側になります。これが の例です 。例からわかるように、css outlineプロパティを使用して、要素の幅と高さに影響しない境界線を設定できます。このように、ボーダー幅は要素の幅に追加されません。

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

アウトラインについての詳細： ここ

79
Shukhrat Raimov

Yahoo!これは本当に可能です。見つけた。

下枠の場合

div {box-shadow: 0px -3px 0px red inset; }

上枠の場合

div {box-shadow: 0px 3px 0px red inset; }
37
xBoss naYan

疑似要素 ：を使用

.button {
    background: #333;
    color: #fff;
    float: left;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
}
<div class='button'>Hello</div>

::afterを使用して、選択した要素の仮想の最後の子をスタイルしています。 contentプロパティは、匿名の 置換要素 を作成します。

親に対する絶対位置を使用して擬似要素を格納しています。それからあなたはあなたの主要な要素の背景にどんなカスタム背景やボーダーを持っている自由を持っています。

このアプローチは、box-sizing: border-box;の使用とは異なり、メイン要素のコンテンツの配置には影響しません。

この例を考えてください。

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    border: 5px solid #f00;
    border-left-width: 20px;
    box-sizing: border-box;
}
<div class='parent'>
    <div class='button'>Hello</div>
</div>

ここでは.buttonの幅は親要素を使って制限されています。 border-left-widthを設定すると、コンテンツボックスのサイズ、つまりテキストの位置が調整されます。

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}
<div class='parent'>
    <div class='button'>Hello</div>
</div>

擬似要素アプローチを使用しても、コンテンツボックスのサイズには影響しません。

アプリケーションによっては、擬似要素を使用したアプローチが望ましい動作である場合とそうでない場合があります。

23
Gajus

この質問はbox-shadowおよびoutlineプロパティを使用した解決策ですでに十分に回答されていますが、（私自身のように）ここに上陸したすべての人たちに オフセットで内側境界の解決策を探してみましょう。

それで、あなたが黒い100px x 100pxのdivを持っていて、あなたが白いボーダーでそれを埋め込む必要があるとしましょう - それは5pxの 内側オフセット を持ちます - これはまだ上記のプロパティでできます。

ボックスシャドウ

ここでの秘訣は、最初の影が一番上にあり、それに続く影がより低いz順序を持つ、複数の影が許されることを知ることです。

その知識があれば、box-shadow宣言は次のようになります。

box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;

div {
  width: 100px;
  height: 100px;
  background: black;
  box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white; 
}
<div></div>

基本的に、その宣言が言っているのは、最後の（10ピクセルx白）影を最初にレンダリングし、それからその上の前の5ピクセルx黒の影をレンダリングするということです。

outline with outline-offset

上記と同じ効果の場合、アウトライン宣言は次のようになります。

outline: 5px solid white;
outline-offset: -10px;

div {
  width: 100px;
  height: 100px;
  background: black;
  outline: 5px solid white;
  outline-offset: -10px;
}
<div></div>

注意： outline-offsetIE でサポートされていません。

Codepenデモ

14
Danield

通常のoutlineを使う代わりに、プロパティborderとoutline-offsetを負の値で使うことができます。

div{
    height: 100px;
    width: 100px;
    background-color: grey;
    margin-bottom: 10px; 
}

div#border{
    border: 2px solid red;
}

div#outline{
    outline: 2px solid red;
    outline-offset: -2px;
}
Using a regular border.
<div id="border"></div>

Using outline and outline-offset.
<div id="outline"></div>
9
Wilson Delgado

私はこれがやや古いことを知っています、しかし、キーワード "border inside"が直接私にここに着いたので、私はここで言及する価値があるかもしれないいくつかの発見を共有したいです。私がホバー状態に境界線を追加したとき、私はOPが話している効果を得ました。枠線はボックスの寸法にピクセルを広告していて、それが飛び散っていました。これに対処できる方法が他に2つあります。これらはIE7でも機能します。

1）要素に既に境界線を付けて、色を変更するだけです。このように数学はすでに含まれています。

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2）マイナスのマージンであなたの国境を補償します。これでもまだ余分なピクセルが追加されますが、要素の位置がずれることはありません。

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}
6
Daniel

新しいブラウザと古いブラウザの間で一貫したレンダリングを行うには、幅を外側に、境界線を内側に2重のコンテナを追加します。

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

これは明らかにあなたの正確な幅が余分なマークアップを持つことよりも重要な場合にだけです！

3
Evert

Box-sizingを使う場合：border-boxはボーダー、パディング、マージンなどを意味するだけではありません。すべての要素は親要素の内側に入ります。

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;
  
}
<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>
2
Ayyappan K

オフセット付きのアウトラインを見ることができますが、これにはdivにパディングが存在する必要があります。または、次のような境界線divを絶対に配置できます

<div id='parentDiv' style='position:relative'>
  <div id='parentDivsContent'></div>
  <div id='fakeBordersDiv' 
       style='position: absolute;width: 100%;
              height: 100%;
              z-index: 2;
              border: 2px solid;
              border-radius: 2px;'/>
</div>

必要に応じて、擬似境界divのマージンを調整する必要がある場合があります。

0
Gorky

@Steveのような最良のクロスブラウザソリューション（主にIEサポート用）は、幅と高さをdiv 98pxにして境界線を1px追加することです。境界線を引きます。

0
mdesdev