CSS에서 "이중"테두리 방지

CSS에서 "이중"테두리 방지

---

테두리 가있는 두 개의 div가 나란히 있다고 가정합니다 ( https://chrome.google.com/webstore/category/home 참조).

내 div가 이중 테두리처럼 나타나지 않도록 방지하는 방법 (가급적 CSS 트릭)이 있습니까? 내가 의미하는 바를 더 잘 이해하려면이 이미지를보십시오.

두 div가 만나는 곳에서 이중 테두리가있는 것처럼 보입니다.

---

#divNumberOne { border-right: 0; }

---

특정 순서로 나타나도록 보장 할 수없는 요소 (한 행에 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 Adjacent 형제 선택기를 사용하는 것 입니다.

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>

---

div의 클래스 이름이 모두 동일한 경우 :

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

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

여기에 JSFiddle 데모가 있습니다.

---

오른쪽의 div에 다음 CSS를 추가합니다.

position: relative;
left: -1px; /* your border-width times -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;
}

---

I know this is a late reaction, but I just wanted to drop my 2 cents worth, since my way of doing it is not in here.

You see, I really don't like playing with margins, especially negative margins. Every browser seems to handle these just that tad bit different and margins are easily influenced by a lot of situations.

My way of making sure I have a nice table with divs, is creating a good html structure first, then apply the css.

Example of how I do it:

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

Now, for the css, I simply use the rows structure to make sure the borders are only where they need to be, causing no margins;

.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, a perfect table. Now, obviously this would cause your DIVs to have 1px differences in widths (specifically the first one), but for me, that has never created any issue of any kind. If it does in your situation, I guess you'd be more dependant on margins then.

---

Using Flexbox it was necessary to add a second child container to properly get the outlines to overlap one another...

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

---

I'm late to the show but try using thhe outline property, like so:

.item {
  outline: 1px solid black;
}

Outlines in CSS do not occupy physical space and will therefore overlap to prevent a double border.

---

What about giving a margin:1px; around your 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

---

I prefer to use another div behind them as background and delete all the borders. You need just to calculate the size of the background div and the position of the foreground divs.

참고 URL : https://stackoverflow.com/questions/12692089/preventing-double-borders-in-css