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

Всем привет, подскажите пожалуйста, почему при 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

Ответ

Достаточно занимательный пример. Когда вы ложите в статическую верстку чистые inline-block - с табуляцией(или пробелами, не важно) и переносами строк - вы потом увидите эти самые пробелы и переносы строк. Попробуйте добавить такое css правило:
div { font-size: 0; }
Просто когда вы делаете elem.append(childElem) - вы не добавляете переносов и пробелов, и всё отрабатывает как, по идее, и хочется.