Oops, sorry my bad, I need to talk about one more topic before continuing with images. That topic is the box model. This is a very important concept that you really need to understand. It is the building blocks of most items on a web page.
The box model concept applies to all the tags we’ve discussed, images <img>, body <body>, paragraph <p>, header <h>, ordered list <ol>, unordered list <ul>, and list item <li>.
The concept is that the content, which are the items in the preceding paragraph, are surrounded by a box representing padding, then working our way out is another box representing the border, and finally a larger box representing the margin. So you have 4 concentric boxes of content, padding, border and margin.
You can change the value for the width (including zero for none) of the padding and regulate the amount of space around the content.
The border box is a typical border with different styles. The border encloses the content and you can change the value of the width (including zero for none).
The margin provides spacing between adjacent content and it can also be changed (including zero for none).
The padding, border and margin all have 4 sides. So, you can set one value for all 4 or you can independently set any side to values different than the other sides.
Click here to see examples of how the box model works.
What people are saying