I am having a number of div elements with dimensions carefully chosen so as to fit snugly with the default (static) positioning within a container:
<html>
<head>
<style>
#container {
box-sizing: content-box;
border: 10px solid black;
width: 200px;
height: 200px;
background: gray;
padding: 0;
font-size:0; /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
}
.cell {
box-sizing: border-box;
border: 10px solid green ;
width: 100px;
height: 100px;
padding: 0;
margin: 0;
background: black;
position: static;
display: inline-block;
}
</style>
</head>
<body>
<div id='container'>
<div class='cell'>
</div>
<div class='cell'>
</div>
<div class='cell'>
</div>
<div class='cell'>
</div>
</div>
</div>
</body>
</html>
The expected result appears in this jsFiddle.
So this is all fine and well.
However, when I attempt to add an img element inside a div:
<div class='cell'>
<img src='foobar.png'/>
</div>
… the layout messes up as shown in this jsFiddle.
Note: not finding the src of the image and not rendering it does not concern me. It's the layout problem that I am asking about.
The only way I discovered how to fix it is to instead place the div inside yet annother div element:
<div class='cell'>
<div class='innerCell'>
<img src='foobar.png'/>
</div>
</div>
The repaired layout in shown this jsFiddle
My questions are:
- What caused the mess up ?
- Why the inner
divfixed it ? - Is there a better fix ?
