| <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, except for the rightmost box in the Inline Blocks section, which should look the same but be raised above the other three in that section. |
| |
| <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> |
