Currently, I am working on a project that involves cloning objects and adding them to the same parent. However, when I animate these objects, my calculations are always slightly off. Upon further investigation, I discovered that inline-block items have trailing spaces, which do not get included when appending a cloned item using jQuery. This inconsistency makes it difficult for me to work with the elements.
After inspecting the elements in browser tools, I found that they appear identical and adjusting margins and padding does not make a difference. I'm not sure if this is a bug or if I am overlooking something essential. You can test this issue yourself by following this link: https://jsfiddle.net/kd5opn7j/2/
$('ul').find('li').each(function(){
$('ul').append($(this).clone());
});
li {
display: inline-block;
width:50px;
height:50px;
background: #555;
}
<ul>
<li></li>
<li></li>
<li></li>
</ul>