CODEWITHSUNDEEP
css
Dirk J. Faber
Dirk J. Faber

Reputation: 4701

Overlap outlines in css

I have an HTML structure with many divs next to each other or below each other that all have an outline. The problem is, these outlines do not overlap, but are shown next to each other (or on top of each other). To illustrate, this is what happens: css outlines next to each other

This is my code, with added nth-child() selectors to clearly show the issue:

.wrapper {
  /*  getting rid of the 'inline-block whitespace' */
  font-size: 0;
  white-space: nowrap;
}

.cell {
  display: inline-block;
  font-size: 2rem;
  padding: 2px;
  width: 100px;
}

.cell:nth-child(even) {
    outline: 6px solid blue;
}

.cell:nth-child(odd) {
    outline: 6px solid red;
}
<div class="wrapper">
  <div>
    <div class="cell">
      one
    </div>
    <div class="cell">
      two
    </div>
  </div>
  <div>
    <div class="cell">
      three
    </div>
    <div class="cell">
      four
    </div>
  </div>
</div>

My question is: How to make these outlines overlap so no 'doubles' are shown?

Update: using half the margin of the width of the outline on the cells does not always work when the outline width is 1px. For example, when the padding of .cell is 4px this is the result (when you zoom in you will see the two lines).

Update2: it seems this is a bug with Firefox on a 4k display. Running this in Firefox on a display with a HD resolution or in another browser (tested Chrome) works.

enter image description here

Upvotes: 2

Views: 2057

Answers (1)

Temani Afif
Temani Afif

Reputation: 272919

apply a margin equal to half the outline:

.wrapper {
  /*  getting rid of the 'inline-block whitespace' */
  font-size: 0;
  white-space: nowrap;
}

.cell {
  display: inline-block;
  font-size: 2rem;
  padding: 2px;
  width: 100px;
  margin: 3px; /* added */
}

.cell:nth-child(even) {
  outline: 6px solid blue;
}

.cell:nth-child(odd) {
  outline: 6px solid red;
}
<div class="wrapper">
  <div>
    <div class="cell">
      one
    </div>
    <div class="cell">
      two
    </div>
  </div>
  <div>
    <div class="cell">
      three
    </div>
    <div class="cell">
      four
    </div>
  </div>
</div>

Or use margin on one side:

.wrapper {
  /*  getting rid of the 'inline-block whitespace' */
  font-size: 0;
  white-space: nowrap;
}

.cell {
  display: inline-block;
  font-size: 2rem;
  padding: 2px;
  width: 100px;
  margin:0 6px 6px 0; /* added */
}

.cell:nth-child(even) {
  outline: 6px solid blue;
}

.cell:nth-child(odd) {
  outline: 6px solid red;
}
<div class="wrapper">
  <div>
    <div class="cell">
      one
    </div>
    <div class="cell">
      two
    </div>
  </div>
  <div>
    <div class="cell">
      three
    </div>
    <div class="cell">
      four
    </div>
  </div>
</div>

Upvotes: 3

Related Questions