Glossary: Margin (defined with CSS and HTML)
A margin is the term used to refer to the space around an object on your blog, such as an image, embedded video, link, block of text, button and many more.
It is the distance between your object and either:
- the object closest to it – e.g. another image, some text
- the interior of the object that surrounds it – e.g. the edge of a blog post, a table cell border
Margins are used to refer to the space around an object on your blog, e.g. image, embedded video, block of text, button & more via @diywptips
Margins are usually defined through CSS Style Sheets for different types (classes) of object but can also be specified inline for individual objects using HTML.
Whitespace is a useful tool improve the readability of your blog and create an elegant and simple blog design. It is the space on your pages effectively left “blank”, free of any elements such as text or images.
Margins are a just one way to introduce whitespace into your design.
Some code examples for the space around an image:
These margins will apply as default to all your images:
This will apply only to the image uploaded to the URL you specify within the “src”:
You can apply different margins on each side of an object as one line in the order Top, Right, Bottom, Left using:
margin: 5px 10px 20px 10px;
This is equivalent to: