Odstęp, który zostaje po usunięciu checkboxa (display:none)

Question

Mam problem z pojawiającym się odstępem, mimo użycia display:none; na inpucie typu checkbox.

Żeby dokładnie było widać o co mi chodzi przygotowałem na codepenie: https://codepen.io/Kolberg/pen/abzRajJ

Jak pozbyć się tego odstępu?

Answer 1

Drugi <span> ma właściwość w style "display: block;", co automatycznie skutkuje pojawieniem się domyślnego marginesu. Jeśli nie chcesz mieć tej przerwy, po prostu usuń display:block

Comments

Właśnie problem w tym że pod tym musi się znajdować element zajmujący na stałe 100% szerokości. Np z inline block ustawionym na 100% problem był nadal. Czy da się ewentualnie usunąć ten domyślny margines? Choć nie do końca jestem pewny czy to jest przyczyna

Answer 2

Nie wiem do końca co chcesz zrobić, ale możesz wyjąć checkbox'y, usunąć margin z dolnego span'u oraz line-height. Div który robi przerwę jest wystarczający, choć nie wiem czemu ma służyć. Wejdź na codepen i zobacz czy o to Ci chodziło?

Answer 3

Ukrywasz inputy ale nie ukrywasz etykiet

input[type=checkbox],
label
{
  display: none;
}