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.