I have come across an article discussing the usage of CSS, but I am puzzled as to why image number four is not positioned below image number one. Instead, it appears below image number three. Can someone please explain this to me? Here is the HTML code snippet:
<ul>
<li><img src="http://placehold.it/100x100&text=1"></li>
<li><img src="http://placehold.it/100x150&text=2"></li>
<li><img src="http://placehold.it/100x100&text=3"></li>
<li><img src="http://placehold.it/100x100&text=4"></li>
<li><img src="http://placehold.it/100x100&text=5"></li>
<li><img src="http://placehold.it/100x150&text=6"></li>
<li><img src="http://placehold.it/100x100&text=7"></li> </ul>
Styling:
li {
float: left;
margin: 4px;
}