Dlaczego te dwa bloki kodu są renderowane inaczej?

<button>text1</button>
<button>text2</button>

Vs

<button>text1</button><button>text2</button>

Zmieniono dla wyjaśnienia:

Widzimy w tym Fiddle:

  • pisanie kontrolek w różnych wierszach dodaje spację między nimi (ta przestrzeń nie jest dostępna przez przeglądanie konsoli, ale jest wyraźnie widoczna)
  • pisanie kontrolek w tej samej linii nie.
0
andy-lane 1 kwiecień 2020, 01:39

3 odpowiedzi

Najlepsza odpowiedź

Dzieje się tak, ponieważ przeglądarka nie ma pojęcia podziałów wierszy ani tabulatorów poza specjalnymi sytuacjami, takimi jak tag <pre>, więc gdziekolwiek je znajdzie, konwertuje je na białe spacje. Pamiętaj, że zignoruje wszystkie spacje, podziały wierszy i tabulatory z wyjątkiem pierwszego. Możesz mieć 30 kolejnych znaków końca wiersza i 100 spacji w kodzie, ale będzie on renderowany jako 1 spacja w przeglądarce.

Nawet kod, który ma tylko podział wiersza, ale nie ma spacji ani wcięć, nadal będzie wyświetlał spację podczas renderowania.

Przykład: kod z podziałem wiersza, ale bez spacji:

    <button>text1</button>
<button>text2</button>

Nadal będzie renderować 1 biały znak między nimi z powodu podziału wiersza. Możesz to sprawdzić na skrzypcach.

Zazwyczaj takie formatowanie jest obsługiwane przez CSS.

Wyjaśnienie MDN jest równie dobre jak inne. Rzeczywista specyfikacja.

0
codebeard 5 kwiecień 2020, 06:57

Miałem to zapamiętane i nie mogłem od razu znaleźć szczegółów w specyfikacji HTML, ale wiem, że jestem na dobrej drodze z tą odpowiedzią.

<button> jest elementem wbudowanym (inline-block). W ten sposób dwa przyciski będą traktowane jako dwa wbudowane słowa. Dlatego, podobnie jak słowa, będzie między nimi odstęp. Ale jeśli nie ma spacji w „tekście”, nie są one już traktowane jako słowa wbudowane i dlatego nie ma między nimi spacji.

Jeśli mogę, dokładną specyfikację znajdę później.

0
Rob 1 kwiecień 2020, 00:34

„EOL” w HTML, który musisz podać, spróbuj umieścić <br> między przyciskami.

<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>

    <h1>Case 1</h1>
    <button>text1</button>
    <br>
    <button>text2</button>


    <h1>Case 2</h1>
    <button>text1</button>
    <br>
    <button>text2</button>

  </body>
</html>


0
Neal 1 kwiecień 2020, 07:53