Запобігання “подвійним” межам у CSS

Скажімо, у мене є два divs поруч один з одним (візьмемо https://chrome.google.com/webstore/category/home як посилання) з межею.

Чи є спосіб (бажано фокус CSS), щоб запобігти моєму div, щоб він мав подвійну межу? Погляньте на це зображення, щоб краще зрозуміти, що я маю на увазі:

Ви можете бачити, що там, де зустрічаються два 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;
}

Демо

Включіть ie9.js для підтримки IE8 (це дуже корисно для всіх селекторів 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>

Якщо всі div мають однакове ім'я класу:

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

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

Тут є демонстрація JSFiddle .

Я запізнююсь на шоу, але спробуйте скористатися властивістю структури, наприклад:

.item {
  outline: 1px solid black;
}

Обриси в CSS не займають фізичного простору і, отже, будуть збігатися, щоб запобігти подвійній межі.

Додайте наступний CSS до div справа:

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

Або просто видаліть одну з меж.

Я просто використовую

border-collapse: collapse;

у батьківському елементі

Використовуючи Flexbox, потрібно було додати другий дочірній контейнер, щоб правильно отримати контури, що перекривають один одного ...

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

СКСС

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

  <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 центи, оскільки мій спосіб це зробити тут не тут.

Розумієте, мені дуже не подобається грати з полями, особливо негативними . Здається, кожен браузер справляється з цим, що трохи відрізняється, і на поля легко впливати багато ситуацій.

Мій спосіб переконатися, що у мене є хороша таблиця з divs, - це створити спочатку хорошу структуру 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;
}

Це працює, оскільки навколо елемента, зробленого з межі та тіні, ви побачите межу розміром 2 пікселі. Однак там, де елементи стикаються, тінь перекривається, що робить її шириною 2 пікселі;

А як щодо того, щоб 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-файлів переднього плану.