Glossary: Margin (defined with CSS and HTML)

Definition:

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

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.
Usage:

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:

1. CSS

These margins will apply as default to all your images:

img {
margin: 10px;
}

or

img {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 15px;
margin-right: 15px;
}
2. HTML

This will apply only to the image uploaded to the URL you specify within the “src”:

<img style="margin: 10px;" src="http://www.diywptips.com/your-image-url" />
Pro Tip:

You can apply different margins on each side of an object as one line in the order Top, Right, Bottom, Left using:

img {
margin: 5px 10px 20px 10px;
}

This is equivalent to:

img {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
}
Example:

Example of a margin in coding

Are you ready for some DIY Wordpress magic?

Easy tips & resources to help you design, build and grow your blog with some Wordpress DIY magic - join me for DIY Wordpress Tips straight to your inbox:

Written by diywptips