Built-in elements and problems with white space markup

Question

On the same day, we had to deal with browsers that add a space between elements if we also had empty space in the original markup.

I thought the problem was almost gone, but now I find the situation in a situation where the problem still exists. What is strange is that the problem is not limited to a specific browser. It discovers the same problematic method in Firefox, Safari, Chrome, and Opera and is only slightly different in IE.

CSS example:

<style type="text/css">
li {
    display: inline;
    background: pink;
    margin: 0px;
    padding: 10px 0px;
}

li a {
    background: green;
    margin: 0px;
    padding: 0px;
}

</style>    

Layout Example:

<ul>
<li>
    <a href="#">hello</a>
</li>
<li>
    <a href="#">world</a>
</li>
</ul>

<ul>
<li><a href="#">hello</a></li>
<li><a href="#">world</a></li>
</ul>

<ul>
<li><a href="#">hello</a></li><li><a href="#">world</a></li>
</ul>

Only that last UL appears as I would like it to appear ... with A tags covering the entire width of the container's LI tag.

, , - ? ( ), - , ?

, LI , - inline.

Answer 1

Yup, - , . , . , , :

<p>I <em>really</em> <strong>really</strong> want that whitespace.</p>

, :

* *** ** .

, , , . , , IE, ...

Answer 2

, .
( ) , . , , , .

Answer 3

You can simply set the font size for the container to 0, for example, put it in a div, and then set the propper font size in the LI element