W Button mam 1 pikselowa wnęke. Jak sie jej pozbyć? CSS

Question

Nie rozumiem tej jedno pikselowej wnęki miedzy tłem a linia w pierwszym przycisku, próbowałem to ogarnąć, ale nic nie działa. Najzabawniejsze ze w drugim butonie wszystko działa jak należy 

To jest mój kod

.sort, .reset{
  display: block;
  margin:50px 20px 0 0;
  width:200px;
  height:40px;
  border: 1px solid red;
  background-color: transparent;
  position: relative;
}

.sort::before, .reset::before{
  content: '';
  display: block;
  width:50%;
  height:100%;
  background-color: red;
  position: absolute;
  z-index: -1;
  top:0;
  left:0;
}

 

Answer 1

[ edit ]

Chyba znalazłem rozwiązanie  

<button class="sort">Sortuj listę malejąco</button>
<button class="reset">Nowa gra</button>
<button class="sort">Sortuj listę malejąco</button>
<button class="reset">Nowa gra</button>

.sort, .reset{
  display: block;
  margin:50px 20px 0 0;
  width:200px;
  height:40px;
  border: 1px solid red;
  background-image: linear-gradient(90deg, rgba(255,0,0,1) 0%, 
                                           rgba(255,0,0,1) 50%,
                                           rgba(255,0,0,0) 51%,
                                           rgba(255,255,255,1) 100%);
}

lub

.sort, .reset{
  display: block;
  margin:50px 20px 0 0;
  width:200px;
  height:40px;
  border: 1px solid red;
  background-image: linear-gradient(90deg, red 0%, red 50%,
                                           white 51%, white 100%);
}

lub  

.sort, .reset{
  display: block;
  margin:50px 20px 0 0;
  width:200px;
  height:40px;
  border: 1px solid red;
  background-image: linear-gradient(90deg, red 0%, red 50%,
                                           white 51%, white 100%);
  box-shadow: inset 2px 2px 20px rgba(255, 255, 255, 1);
}

 

 

 "work around"

<button class="sort">Sortuj listę malejąco</button>
<button class="reset">Nowa gra</button>
<button class="sort">Sortuj listę malejąco</button>
<button class="reset">Nowa gra</button>

.sort, .reset{
  display: block;
  margin:50px 20px 0 0;
  width:200px;
  height:40px;
  border: 1px solid red;
  background-color: transparent;
  position: relative;
}
 
.sort::before, .reset::before{
  content: '';
  width:50%;
  height:101%;
  background-color: red;
  position: absolute;
  z-index: -1;
  top:0;
  left:0;
}

Comments

takie łatwe, a takie trudne, dzięki mordo za pomoc

---

@VBService, serio  height:101%; ? uważasz za poprawne rozwiązanie ? Potem ktoś takie rzeczy zacznie stosować, 101% ... jest już samo w sobie błędem 

---

@Wiciorny, zmieniłem na "work around", a jak znasz lepsze rozwiązanie to go podaj, bo ten Twój komentarz nie wiele wnosi, poza tym, że stwierdziłeś, że rozwiązanie jest błędne, ale na ten czas działa.

To jak to wytłumaczysz?

<button class="sort">Sortuj listę malejąco</button>
<button class="reset">Nowa gra</button>
<button class="sort">Sortuj listę malejąco</button>
<button class="reset">Nowa gra</button>
<button class="reset">Nowa gra</button>
<button class="sort">Sortuj listę malejąco</button>
<button class="reset">Nowa gra</button>

.sort, .reset{
  display: block;
  margin:50px 20px 0 0;
  width:200px;
  height:40px;
  border: 1px solid red;
  background-color: transparent;
  position: relative;
}
  
.sort::before, .reset::before{
  content: '';
  width:50%;
  height:100%;
  background-color: red;
  position: absolute;
  z-index: -1;
  top:0;
  left:0;
}

---

niewiele wnosi, słuchaj bo to nie jest tak " że działa" to jest dobrze, kod można napisać tak żeby działał a może być beznadziejny, bo się okaże że tu działa, ale na innej przeglądarce, albo potem już całkiem nic nie działa.
Wiec takie praktykowanie jest... bez sensu kod ma działać zawsze i dla każdego "zewnętrznego stanu" przy dobrym założeniu.

Wytłumaczę to tak, że jest to spowodowane tym co znajduje się po stronie html I TO JAK WEDŁUG WCG jest czytany kod, np znak nowej lini w interpreterze może wpływać na takie zachowanie.
Odbiegając od tego, u mnie ten problem nie występuje, ja rozumiem że to jest fix na przykładzie tego zadania, ale starałbym się może  wyjasnić dlaczego takie zachowanie ma miejsce i co jest przyczyną, następnie to rozwiązac. Pomyślę zaraz i sprawdzę co to generuje