<head>
<style>
div, img {
background-color: orange;
color: white;
border: 2px solid black;
padding: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
margin:10px 5px;
}
</style>
</head>
<body>
All of the boxes below should be 20x20 and look identical. Note that the last
inline-block box is positioned higher than the others. This is expected.
<h1>Normal Blocks</h1>
<div style="-webkit-box-sizing: content-box; -moz-box-sizing: content-box; width:8px; height:8px"></div>
<div style="width:20px; height:20px"></div>
<div style="max-width:20px; min-height:20px"></div>
<div style="width:20px; max-height:20px"><br><br><br></div>
<h1>Inline Blocks</h1>
<div style="display: inline-block; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; width:8px; height:8px"></div><div style="display: inline-block; width:20px; height:20px"></div><div style="display: inline-block; min-width:20px; min-height:20px;"></div><div style="display: inline-block; width:20px; max-height:20px"><br><br><br></div>
<h1>Positioned Blocks</h1>
<div style="position:absolute; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; width:8px; height:8px"></div>
<div style="position:absolute; left:38px; width:20px; height:20px"></div>
<div style="position:absolute; left:68px; min-width:20px; min-height:20px;"></div>
<div style="position:absolute; left:98px; width:20px; max-height:20px"><br><br><br></div>
<br>
<h1>Floating blocks</h1>
<div style="float:left; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; width:8px; height:8px"></div>
<div style="float:left; width:20px; height:20px"></div>
<div style="float:left; min-width:20px; min-height:20px"></div>
<div style="float:left; width:20px; max-height:20px"><br><br><br></div>
<br clear="left">
<h1>Normal Images</h1>
<img src="resources/white.gif" style="-webkit-box-sizing: content-box; -moz-box-sizing: content-box; width:8px; height:8px"><img style="width:20px; height:20px" src="resources/white.gif"><img style="max-width:20px; min-height:20px; padding-top:2px; padding-bottom:2px" src="resources/white.gif"><img style="width:20px; max-height:20px" src="resources/white.gif">
<h1>Positioned Images</h1>
<img style="position:absolute; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; width:8px; height:8px" src="resources/white.gif">
<img style="position:absolute; left:38px; width:20px; height:20px" src="resources/white.gif">
<img style="position:absolute; left:68px; min-width:20px; min-height:20px; padding:2px" src="resources/white.gif">
<img style="position:absolute; left:98px; width:20px; max-height:20px" src="resources/white.gif">
<br>
<h1>Floating Images</h1>
<img style="float:left; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; width:8px; height:8px" src="resources/white.gif">
<img style="float:left; width:20px; height:20px" src="resources/white.gif">
<img style="float:left; min-width:20px; min-height:20px; padding:2px" src="resources/white.gif">
<img style="float:left; width:20px; max-height:20px" src="resources/white.gif">
<br clear="left">
<hr>
Codebase Browser
chromium