CSSでの「二重」境界線の防止

境界線のある2つのdivが隣り合っているとします（https://chrome.google.com/webstore/category/homeを参照してください）。

私のdivが二重の境界線を持っているように見えるのを防ぐ方法（できればCSSトリック）はありますか？私が何を意味するかをよりよく理解するためにこの画像を見てください：

2つのdivが出会う場所で、二重の境界線があるように見えることがわかります。

#divNumberOne { border-right: 0; }

特定の順序で表示されることが保証されない要素（1つの行に3つの要素が続き、その後に2つの要素がある行が続くなど）について話している場合は、コレクション内のすべての要素に配置できるものが必要です。 。このソリューションはそれをカバーする必要があります：

.collection {
    /* these styles are optional here, you might not need/want them */
    margin-top: -1px;
    margin-left: -1px;
}

.collection .child {
    outline: 1px solid; /* use instead of border */
    margin-top: 1px;
    margin-left: 1px;
}

アウトラインは古いブラウザ（IE7以前）では機能しないことに注意してください。

または、境界線に固執して負のマージンを使用することもできます。

.collection .child {
    margin-top: -1px;
    margin-left: -1px;
}

HTML：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

CSS：

div {
    border: 1px solid #000;
    float: left;
}

div:nth-child(n+2) {
    margin-left: -1px;
}

デモ

IE8をサポートするためにie9.jsを含めます（すべてのCSSセレクター/疑似要素に非常に役立ちます）。

検討する可能性のある別の解決策は、CSS隣接兄弟セレクターを使用することです。

CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

これを実現するために奇数セレクターを使用できます

.child{
   width:50%;
   float:left;
   box-sizing:border-box;
   text-align:center;
   padding:10px;
   border:1px solid black;
   border-bottom:none;
}
.child:nth-child(odd){
   border-right:none;
}
.child:nth-last-child(2),
.child:nth-last-child(2) ~ .child{
   border-bottom:1px solid black
}

<div>
    <div class="child" >1</div>
    <div class="child" >2</div>
    <div class="child" >3</div>
    <div class="child" >4</div>
    <div class="child" >5</div>
    <div class="child" >6</div>
    <div class="child" >7</div>
    <div class="child" >8</div>
</div>

私はショーに遅れていますが、次のように、outlineプロパティを使用してみてください。

.item {
  outline: 1px solid black;
}

CSSのアウトラインは物理的なスペースを占有しないため、二重の境界線を防ぐために重なります。

divがすべて同じクラス名を持っている場合：

div.things {
    border: 1px solid black;
    border-left: none;
}

div.things:first-child {
    border-right: 1px solid black;
}

ここにJSFiddleデモがあります。

Flexboxを使用して、アウトラインを互いにオーバーラップさせるために2番目の子コンテナを追加する必要がありました...

<div class="grid__container">
    <div class="grid__item">
        <div class="grid__item-outline">
              <!-- content -->
        </div>
    </div>
</div>

SCSS

.grid__container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 1px 0 0; // margin-right 1px to give the correct width to the container
}

.grid__item {
    flex: 0 1 25%; // grid of 4
    margin: 0 0 1px; // margin-bottom to prevent double lines
}

.grid__item-outline {
    margin: 0 0 0 1px; // margin-left to prevent double lines
    outline: 1px solid #dedede;
}

次のCSSを右側のdivに追加します。

position: relative;
left: -1px; /* your border-width times -1 */

または、境界線の1つを削除します。

私はただ使う

border-collapse: collapse;

親要素で

  <div class="one"></div>
  <div class="two"></div>
  <div class="two"></div>
  <div class="two"></div>
  <div class="two"></div>

CSS：

  .one{
    width:100px;
    height:100px;
    border:thin red solid;
    float:left;
  }
.two{
    width:100px;
    height:100px;
    border-style: solid solid solid none;

    border-color:red;
    border-width:1px;
    float:left;
}

jsFiddle

私のユースケースは、最後の要素が何であるかを知っている単一行のボックスの場合でした。

.boxes {
  border: solid 1px black  // this could be whatever border you need
  border-right: none;
}

.furthest-right-box {
  border-right: solid 1px black !important;
}

これは遅い反応だと思いますが、私のやり方がここにないので、2セントの価値を落としたかっただけです。

ほら、私はマージン、特にネガティブマージンで遊ぶのは本当に好きではありません。すべてのブラウザはこれらを少しだけ異なって処理しているようで、マージンは多くの状況の影響を受けやすいです。

divを含む素敵なテーブルがあることを確認する私の方法は、最初に適切なhtml構造を作成してから、cssを適用することです。

私のやり方の例：

 <div class="tableWrap">
   <div class="tableRow tableHeaders">
     <div class="tableCell first">header1</div>
     <div class="tableCell">header2</div>
     <div class="tableCell">header3</div>
     <div class="tableCell last">header4</div>
   </div>
   <div class="tableRow">
     <div class="tableCell first">stuff</div>
     <div class="tableCell">stuff</div>
     <div class="tableCell">stuff</div>
     <div class="tableCell last">stuff</div>
   </div>
</div>

ここで、cssの場合、行構造を使用して、境界線が必要な場所にのみ存在し、マージンがないことを確認します。

.tableWrap {
  display: table;
  }

.tableRow {
  display: table-row;
  }

.tableWrap .tableRow:first-child .tableCell {
  border-top: 1px solid #777777;
  }

.tableCell {
  display: table-cell;
  border: 1px solid #777777;
  border-left: 0;
  border-top: 0;
  padding: 5px;
  }

.tableRow .tableCell:first-child {
  border-left: 1px solid #777777;
  }

Et voila、完璧なテーブル。さて、これは明らかにあなたのDIVに幅の1pxの違い（特に最初のもの）を持たせるでしょう、しかし私にとって、それはどんな種類の問題も引き起こしませんでした。もしそれがあなたの状況でそうなら、私はあなたがマージンにもっと依存するだろうと思います。

私はこのコードを使用してそれを達成することができました：

td.highlight {
    outline: 1px solid yellow !important;
    box-shadow: inset 0px 0px 0px 3px yellow;
    border-bottom: 1px solid transparent !important;
}

非常に古い質問ですが、これは最初のgoogleの結果でした。したがって、これに遭遇し、モバイルなどで要素の左右に境界線を再度追加するメディアクエリを必要としない人にとっては。

私が使用する解決策は次のとおりです。

.element {
    border: 1px solid black;
    box-shadow: 0 0 0 1px black;
}

これが機能するのは、境界線と影で構成された要素の周囲に2pxの境界線が表示されるためです。ただし、要素が出会う場所では、影が重なり、幅が2pxに保たれます。

margin:1px;あなたのdivの周りに与えるのはどうですか。

<html>
<style>
.brd{width:100px;height:100px;background:#c0c0c0;border:1px solid red;float:left;margin:1px;}
</style>
<body>
    <div class="brd"></div>
    <div class="brd"></div>
    <div class="brd"></div>
</body>
</html>

デモ

背景として背後にある別のdivを使用し、すべての境界線を削除することを好みます。背景のdivのサイズと前景のdivの位置を計算するだけです。