Prevenzione dei bordi "doppi" nei CSS

Supponiamo che io abbia due div uno accanto all'altro (prendi https://chrome.google.com/webstore/category/home come riferimento) con un bordo.

C'è un modo (preferibilmente un trucco CSS) per evitare che i miei div sembrino avere un doppio bordo? Dai uno sguardo a questa immagine per capire meglio cosa intendo:

Puoi vedere che dove i due div si incontrano, sembra che abbiano un doppio bordo.

#divNumberOne { border-right: 0; }

Se parliamo di elementi che non possono essere garantiti per apparire in un ordine particolare (forse 3 elementi in una riga, seguiti da una riga con 2 elementi, ecc.), Vuoi qualcosa che possa essere posizionato su ogni elemento della raccolta . Questa soluzione dovrebbe coprire quanto segue:

.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;
}

Nota che lo schema non funziona nei browser meno recenti (IE7 e precedenti).

In alternativa, puoi restare fedele ai bordi e utilizzare margini negativi:

.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;
}

Demo

Includere ie9.js per il supporto IE8 (è molto utile per tutti i selettori / pseudo-elementi CSS).

Un'altra soluzione che si potrebbe prendere in considerazione è l'utilizzo del selettore di pari livello CSS adiacente .

Il CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

È possibile utilizzare il selettore dispari per ottenere questo risultato

.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>

Sono in ritardo per lo spettacolo, ma prova a utilizzare la proprietà outline, in questo modo:

.item {
  outline: 1px solid black;
}

I contorni nei CSS non occupano spazio fisico e quindi si sovrapporranno per evitare un doppio bordo.

Se i div hanno tutti lo stesso nome di classe:

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

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

C'è una demo di JSFiddle qui.

Utilizzando Flexbox è stato necessario aggiungere un secondo contenitore figlio per far sì che i contorni si sovrappongano correttamente ...

<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;
}

Aggiungi il seguente CSS al div a destra:

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

O rimuovi semplicemente uno dei bordi.

Uso solo

border-collapse: collapse;

nell'elemento genitore

  <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

Il mio caso d'uso era per scatole in una singola riga in cui sapevo quale sarebbe stato l'ultimo elemento.

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

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

So che questa è una reazione tardiva, ma volevo solo perdere i miei 2 centesimi, dal momento che il mio modo di farlo non è qui.

Vedi, non mi piace davvero giocare con i margini, specialmente con i margini negativi . Ogni browser sembra gestirli in modo leggermente diverso ei margini sono facilmente influenzati da molto situazioni.

Il mio modo per assicurarmi di avere una bella tabella con i div è creare prima una buona struttura html , quindi applicare il css.

Esempio di come lo faccio:

 <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>

Ora, per il CSS, utilizzo semplicemente la struttura delle righe per assicurarmi che i bordi siano solo dove devono essere, senza creare margini;

.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 voilà, una tavola perfetta. Ora, ovviamente questo farebbe sì che i tuoi DIV abbiano differenze di larghezza di 1 px (in particolare il primo), ma per me, ciò non ha mai creato alcun problema di alcun tipo. Se è così nella tua situazione, immagino che allora saresti più dipendente dai margini.

Sono stato in grado di ottenerlo utilizzando questo codice:

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

Una domanda molto vecchia, ma era il primo risultato di Google, quindi per chiunque si imbatta in questo e non vuole avere query multimediali per aggiungere nuovamente il bordo a destra / sinistra dell'elemento su dispositivo mobile, ecc.

La soluzione che utilizzo è:

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

Funziona perché vedrai un bordo di 2px attorno all'elemento composto dal bordo e dall'ombra. Tuttavia, dove gli elementi si incontrano, l'ombra si sovrappone che la mantiene larga 2px;

Che ne dici di dare un margin:1px;giro al tuo 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>

DEMO

Preferisco usare un altro div dietro di loro come sfondo ed eliminare tutti i bordi. Devi solo calcolare la dimensione del div in background e la posizione dei div in primo piano.