css - Voorkomen van “dubbele” randen in CSS

Stel dat ik twee div’s naast elkaar heb (neem https://chrome.google.com /webstore/category/homeals referentie) met een rand.

Is er een manier (bij voorkeur een CSS-truc) om te voorkomen dat mijn divs eruitzien alsof ze een dubbele rand hebben? Bekijk deze afbeelding om beter te begrijpen wat ik bedoel:

Je kunt zien dat waar de twee div’s samenkomen, het lijkt alsof ze een dubbele rand hebben.

Antwoord 1, autoriteit 100%

Als we het hebben over elementen waarvan niet gegarandeerd kan worden dat ze in een bepaalde volgorde verschijnen (misschien 3 elementen in een rij, gevolgd door een rij met 2 elementen, enz.), wil je iets dat op elk element kan worden geplaatst in de collectie. Deze oplossing zou dat moeten dekken:

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

Houd er rekening mee dat overzicht niet werkt in oudere browsers(IE7 en eerder).

U kunt ook bij de randen blijven en negatieve marges gebruiken:

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

Antwoord 2, autoriteit 27%

#divNumberOne { border-right: 0; }

Antwoord 3, autoriteit 25%

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

Voeg ie9.jstoe voor IE8-ondersteuning (het is erg handig voor alle CSS-selectors /pseudo-elementen).

Antwoord 4, autoriteit 23%

Een andere oplossing die je zou kunnen overwegen is het gebruik van de CSS Aangrenzende broer of zus-selector.

De CSS

div {
    border: 1px solid black;
}
div + div {
    border-left: 0;
}

jsFiddle

Antwoord 5, autoriteit 12%

Ik ben te laat voor de show, maar probeer de eigenschap outline te gebruiken, zoals:

.item {
  outline: 1px solid black;
}

Contouren in CSS nemen geen fysieke ruimte in beslag en zullen daarom overlappen om een dubbele rand te voorkomen.

6, Autoriteit 5%

Als de DIVS allemaal dezelfde klasnaam hebben:

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

Er is een JSFiddle Demo hier.

7, Autoriteit 2%

Voeg de volgende CSS toe aan de DIV aan de rechterkant:

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

of verwijder gewoon een van de grenzen.

8, Autoriteit 2%

Het gebruik van FlexBox was nodig om een tweede kindcontainer toe te voegen om de contouren goed te krijgen om elkaar te overlappen …

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

9

Als u ook grenskleuren op interactie moet wijzigen (bijv. Swatch-selector in een formulier), ontdekte ik een mooie truc om het te doen, met behulp van een combinatie van negatieve marges, opvulling-afstelling en transformatie. Bekijk het uit:

.parent{
  display: flex;
  width: 100%;
  max-width: 375px;
  margin-left:1px;
}
.child {
  margin-left: -1px;/* hide double borders behind their siblings */ 
  flex: 1 0 auto;
}
.child input {
  display:none
}
.child label {
  display:block;
  border: 1px solid #eaeaea;
  min-height: 45px;
  line-height: 45px;
  cursor: pointer;
  padding: 0 10px; /* will be changed when input is checked */
  font-size: 15px;
  text-align: center;
}
.child input:checked+label {
  border: 1px solid red;
  transform: translateX(-1px);
  padding-left: 11px;
  padding-right: 9px;
  background-color: #fafafa;
}

<div class="parent">
  <div class="child">
    <input id="swatch-1" type="radio" value="1" name="option" checked="true">
    <label for="swatch-1">Element 1</label>
   </div>
   <div class="child">
    <input id="swatch-2" type="radio" value="2" name="option">
    <label for="swatch-2">Element 2</label>
   </div>
   <div class="child">
    <input id="swatch-3" type="radio" value="3" name="option">
    <label for="swatch-3">Element 3</label>
   </div>
 </div>

Snippet uitvouwen

Antwoord 10

 <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

Antwoord 11

Ik gebruik gewoon

border-collapse: collapse;

in het bovenliggende element

Antwoord 12

Mijn gebruiksvoorbeeld was voor dozen in een enkele rij waarvan ik wist wat het laatste element zou zijn.

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

Antwoord 13

Ik weet dat dit een late reactie is, maar ik wilde gewoon mijn 2 cent laten vallen, omdat mijn manier om het te doen hier niet in staat.

Zie je, ik speel niet graag met marges, vooral negatieve marges. Elke browser lijkt hier net iets anders mee om te gaan en marges kunnen gemakkelijk worden beïnvloed door veelsituaties.

Mijn manier om ervoor te zorgen dat ik een mooie tabel met divs heb, is eerst een goede html-structuur makenen dan de css toepassen.

Voorbeeld van hoe ik het doe:

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

Voor de CSS gebruik ik gewoon de rijenstructuur om ervoor te zorgen dat de randen alleen zijn waar ze moeten zijn, zonder marges;

.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, een perfecte tafel.
Dit zou er natuurlijk voor zorgen dat je DIV’s 1px verschillen in breedte hebben (met name de eerste), maar voor mij heeft dat nooit tot enig probleem geleid. Als dat in jouw situatie het geval is, denk ik dat je dan meer afhankelijk bent van marges.

Antwoord 14

Ik heb het kunnen bereiken met deze code:

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

Antwoord 15

Een zeer oude vraag, maar het was het eerste Google-resultaat, dus voor iedereen die dit overkomt en geen media-query’s wil hebben om de rand opnieuw toe te voegen aan de rechter / links van het element op mobiele enz.

De oplossing die ik gebruik is:

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

Dit werkt omdat je een 2px-rand rond het element van de rand en de schaduw ziet. Waar de elementen elkaar echter ontmoeten, overlapt de schaduw die het 2px breed behoudt;

16

Om toe te voegen aan een 9-jarige vraag, een andere schone en responsieve manier om dit te bereiken is:

Voeg een border-leften border-topNaar de ouder
Toevoegen border-rightEN border-bottomAAN ELK VAN DE KINDEREN

17

Hoe zit het met het geven van een margin:1px;rond uw 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>