Межсимвольный интервал не работает, когда страница была обработана document.write

Question

Ниже код работает, как я ожидал. Каждая вещь идеально подходит для укладки.

<style>
   .letter-spacing{
      width: 400px;
      background: red;
      text-align: center;
      letter-spacing: 20px;
    }
</style>

<div class="letter-spacing">
   <img src="icon1.png">
   <img src="icon2.png">
</div>

Однако, если я отрисовываю "div" с помощью document.write, "letter-spacing: 20px;" не работает Интересно, что красный фон и выравнивание по центру все еще работают.

<style>
   .letter-spacing{
      width: 400px;
      background: red;
      text-align: center;
      letter-spacing: 20px;
    }
</style>

<script>
    document.write('<div class="letter-spacing">'+
                       '<img src="icon1.png">'+
                       '<img src="icon2.png">'+
                   '</div>');
</script>

Есть кто-нибудь знает почему?

Answer 1

Это потому что ты пишешь это так

document.write('<div class="letter-spacing">'+
                   '<img src="icon1.png">'+
                   '<img src="icon2.png">'+
               '</div>');

что приведет к этому HTML

<div class="letter-spacing"><img src="icon1.png"><img src="icon2.png"></div>

который не содержит места, таким образом letter-spacing: 20px; не работает.

Отличается от того, что вы пишете прямо в HTML с new line который рассматривается как пространство.

Если вы хотите получить тот же результат, измените его на этот

document.write('<div class="letter-spacing">'+
                   '<img src="icon1.png"> '+    // Note the space before '
                   '<img src="icon2.png">'+
               '</div>');

Answer 2

Это очень странно, но я мог бы исправить это некоторым трудным способом, как это

document.write('<div class="letter-spacing"> '+
               '<img style="margin-right: 20px;" src="icon1">'+
                   '<img src="icon2">'+
               '</div>');

Но если я устанавливаю класс в css, он не работает. Это действительно странно