CSS: Inline elements and padding

Have you ever tried to add padding to <li> elements that have been set to “display: inline”? Did you find that the padding seemed to be rendering in an unusual way? In the example below, the <li> elements have been set to “display: inline”, and then 1em of padding has applied to all sides. Unfortunately, the padding on the top and bottom of the <li> elements seems to have been ignored causing the elements to overlap each other