| <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> |
