"Omkring jeres samtale - er problemet med inline-block så ikke at den har 4px space på hver side, som kræver man bruger små mærkelige fixes - således at det er grunden til folk bruger float, for at kunne lave designs uden de mellemrum?"Jo, det lyder sandsynligt. Ikke fordi der sker noget mærkeligt ved brugen af inline-block - men fordi rigtig mange ikke er særlig godt inde i, hvordan de mest basale HTML-ting faktisk virker.
Block elementer kan i udgangspunktet ikke ligge ved siden af hinanden, men lægger sig over/under hinanden. De frembringer en blok.
Inline elementer kan ligge ved siden af hinanden - på linje med hinanden. Inline elementer kan kun indeholde andre inline elementer, men ikke block elementer.
Når to inline elementer skrives på denne måde:
<span>Ole</span>
<span>Bole</span>
- er det ret elementært, at de ikke renderes som:
OleBole
- men som:
Ole Bole
Skriver man dem derimod sådan:
<span>Ole</span><span>Bole</span>
- er det ligså velkendt, at de vil blive renderet som:
OleBole
Derfor er det helt forventeligt og logisk, at der ved en liste, der er skrevet sådan:
<style type="text/css">
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
display: inline-block;
background: yellow;
}
</style>
<ul>
<li>Emne 1</li>
<li>Emne 2</li>
<li>Emne 3</li>
</ul>
- vil opstå mellemrum mellem de enkelte LI elementer. Fuldstændig ligesom ved alle andre inline elementer, hvilket jo ikke plejer at forvirre nogen.
Vil man undgå disse mellemrum, kan man bare fjerne mellemrummet mellem LI elementerne:
<ul>
<li>Emne 1</li><li>Emne 2</li><li>Emne 3</li>
</ul>
- eller:
<ul>
<li>Emne 1</li><li>
Emne 2</li><li>
Emne 3</li>
</ul>
- eller:
<ul>
<li>Emne 1</li><!--
--><li>Emne 2</li><!--
--><li>Emne 3</li>
</ul>
Du er ikke vidne til mærkeligheder ... blot HTML, der udfolder en af sine helt grundlæggende og velkendte sider *o)
