| One | Two |
| Three | Four |
| Basic image. We start out with the same, fixed html, where we will add style (can be done in CSS of course) |
<img src="tiger.jpg">
| |
| Image with no width and height. Simple way to dispose of an image, is to set its dimensions to 0x0. Be aware, it is no longer clickable when used in a link |
<img src="tiger.jpg" style="width:0px; height: 0px;" >
|
|
| Image with padding and red background. To preseve some clickable area, we can add a border |
<img src="tiger.jpg" style="padding: 50px; background-color:red;" >
|
|
| Image with padding and reset width and height. Only the padding remains, but that is part of the box, so will be clickable |
<img src="tiger.jpg" style="padding: 50px; background-color:red; width:0px; height: 0px;" >
|
|
| image with padding and reset width and height, background image |
<img src="tiger.jpg" style="padding: 150px 200px 0px 0px; background: url('butterfly.jpg'); background-size:auto; width:0px; height: 0px;">
|
vertical-align:middle;