How to Add Margins and Padding to Your Content

Adding extra spacing around a paragraph or an image can make your content more aesthetically pleasing and easier to read. You can do this by changing the margins or the padding on a specific object. When you’re creating a paragraph, think of it as text inside a giant rectangle. With no padding and no margins, the text will be flush on the edge of the rectangle. See below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum sed eros dignissim blandit. Sed turpis justo, egestas sit amet porta non, ornare ac erat. Phasellus malesuada consectetur posuere.

CODE: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum sed eros dignissim blandit. Sed turpis justo, egestas sit amet porta non, ornare ac erat. Phasellus malesuada consectetur posuere.</p>

Note: the black border is just for example and is “invisible” in the code above.

HOW TO ADD PADDING

Padding adds space INSIDE the border of the rectangle. Let’s add a padding of 15 pixels to give the text some nice breathing room.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum sed eros dignissim blandit. Sed turpis justo, egestas sit amet porta non, ornare ac erat. Phasellus malesuada consectetur posuere.

CODE: <p style="padding: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum sed eros dignissim blandit. Sed turpis justo, egestas sit amet porta non, ornare ac erat. Phasellus malesuada consectetur posuere.</p>

This will add padding to all four sides of the object. Margins work exactly the same way, except they add space on the OUTSIDE of the box.



HOW TO SET MARGINS

Let’s say we have an image right next to a paragraph. Neither of them have any margins set. It would display like in the example below:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum sed eros dignissim blandit. Sed turpis justo, egestas sit amet porta non, ornare ac erat. Phasellus malesuada consectetur posuere.

CODE: <img src="myimage.jpg" style="float: left;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum sed eros dignissim blandit. Sed turpis justo, egestas sit amet porta non, ornare ac erat. Phasellus malesuada consectetur posuere.</p>

Now, lets add a margin to the image. You will see that the image will move away from the paragraph and add some spacing.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum sed eros dignissim blandit. Sed turpis justo, egestas sit amet porta non, ornare ac erat. Phasellus malesuada consectetur posuere.

CODE: <img src="myimage.jpg" style="float: left; margin: 15px;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum sed eros dignissim blandit. Sed turpis justo, egestas sit amet porta non, ornare ac erat. Phasellus malesuada consectetur posuere.</p>

These are a few simple inline styles you can add to your HTML to help adjust things on the page the way you want them to display. If you have any questions about styles, or these styles in particular, you can visit the W3C website on padding or margins.

Please feel free to comment and let me know if this format of code examples works for you. If not, what would work for you? Thanks for the read!