UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

Example URL:
https://jsfiddle.net/Mashpoe/8L1mzn6h/

Steps to reproduce the problem:
If you have a div with padding and "display: inline", each time a child div is replaced, as in "parent.removeChild(oldChild)" and "parent.appendChild(newChild)", the new child element will have more padding than the previous child, and the padding will always increase by the parent's amount of padding.

There is nothing different about the child element; it is created exactly the same each time, which you can see in the fiddle. I originally found this problem on my own website and was able to recreate it in the fiddle that I submitted.

What is the expected behavior?
If you remove a child element and then replace it with an identical one, you would expect the page to look exactly the same.

What went wrong?
Each time you replace the child element, the new child will have + 10px of padding. This is because the parent has "padding: 10px."

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? No
 I have only tested this in the latest versions of Safari, Firefox, Chrome, and Edge. Firefox and Edge do not have this issue.

Chrome version: 69.0.3497.100  Channel: n/a
OS Version: 10.0
Flash Version: