Воздействие append на вид страницы

#jquery #css

Всем привет, подскажите пожалуйста, почему при append результат отличается от статического
html? 

Я накидал пример для иллюстрации: https://www.w3schools.com/code/tryit.asp?filename=FLSELJ1WJACU



$("#test_jq").append("
");
$("#test_jq").append("
");
$("#test_jq").append("
");


$("#test_jq2").append("
");
$("#test_jq2").append("
");
$("#test_jq2").append("
");
.test {
  padding: 0;
  margin: 1px;
  position: relative;
  width: 100px;
  height: 120px;
  display: inline-block;
  background-color: pink;
}

This is a Heading

Test preview


  

  

  





Test preview 2




  

  

  





    

Ответы

Ответ 1

Достаточно занимательный пример. Когда вы ложите в статическую верстку чистые inline-block
- с табуляцией(или пробелами, не важно) и переносами строк - вы потом увидите эти самые
пробелы и переносы строк. Попробуйте добавить такое css правило:

div {
    font-size: 0;
}


Просто когда вы делаете elem.append(childElem) - вы не добавляете переносов и пробелов,
и всё отрабатывает как, по идее, и хочется.


Ответ 2

Попробуйте так:

Test preview






По-моему, все ясно.