css - can't get rid of border

Question

I made the following codepen: https://codepen.io/chiptus/pen/rZKJyy where I have a spotlight with a wide source that can move around. it sort of works but for some reason there is a whitespace between the triangles and the center rectangle.

The spotlight container is just there so the spotlight won't interact with the flow of the page.

The spotlight is constructed from three parts - two triangles and a center rectangle. The two triangles are created used games with the border and the rectangle is just a div block with the same color as the triangles.

This is the CSS (there are some variables I removed):

.spotlight-container > div {
  display: inline-block;
}

.spotlight-center {
  position: relative;
  height: 100%;
  text-align: center;
}

.spotlight-left::before,
.spotlight-right::before,
.spotlight-left::after,
.spotlight-right::after {
  content: '';
}

.spotlight-center {
  display: inline-block;
  margin-top: var(--spotlight-sourcey);
  height: calc(var(--spotlight-height) - var(--spotlight-sourcey));
  width: calc(var(--spotlight-source-width) * var(--spotlight-width));
  background-color: var(--spotlight-color);
}

.spotlight-left::before {
  display: inline-block;
  margin-top: var(--spotlight-sourcey);
  height: 0;
  width: 0;
  border: 3px solid;
  border-top-width: 0;
  border-bottom-width: calc(var(--spotlight-height) - var(--spotlight-sourcey));
  border-left-width: calc(var(--spotlight-sourcex) * var(--spotlight-width));
  border-right-width: 0;
  border-color: transparent transparent var(--spotlight-color);
}

.spotlight-right::before {
  display: inline-block;
  margin-top: var(--spotlight-sourcey);
  height: 0;
  width: 0;
  border: 3px solid;
  border-top-width: 0;
  border-bottom-width: calc(var(--spotlight-height) - var(--spotlight-sourcey));
  border-left-width: 0;
  border-right-width: calc(
    (1 - var(--spotlight-sourcex)) * var(--spotlight-width)
  );
  border-color: transparent transparent var(--spotlight-color);
}

score 2 · Accepted Answer · answered Sep 13 '18 at 18:32

2

Change your .spotlight-container > div selector to this:

.spotlight-container > div {
    float: left;
}

The gaps are caused by the way elements are lined up when displayed as inline-block.

A very common workaround to inline-block gaps is to simply float all elements to the left or right.

answered Sep 13 '18 at 18:32

Adam

3,829
1
21
31

also Facundo Corradini's solution worked, but this seems to me a more general solution, as it will work also with text. – Chiptus Sep 15 '18 at 17:07

score 1 · Answer 2 · answered Sep 13 '18 at 19:03

The gaps are created by the cingy behaviour of whitespace on inline-block elements.

If your spotlight container (and any descendant) won't have any text on them, the easiest solution is setting it's font-size to zero.

.spotlight-container { font-size:0; }

score -1 · Answer 3 · answered Sep 13 '18 at 18:36

-1

This css solves your problem and all aplication works:

.spotlight-center,
.spotlight-right,
.spotlight-left{
   float:left;
}

Solved solution

answered Sep 13 '18 at 18:36

kademat

134
1
9

css - can't get rid of border

3 Answers3