How to add white space around a web page using CSS?

Let’s say you have a a simple web page like so:

<body>
   <h1>This is a responsive image</h1>
   <img src="image.jpg" alt=""> 
   <p>This is a paragraph</p> 
</body>

Now, to add some white space around this web page, you can use these two methods:

Method 1

Say, you want to add 50px space on the left an right side :

body {
    margin: 0 50px;
}

In the above code, the first parameter ‘0’ represents top-bottom, and the second parameter ’50px’ represents left-right. This means 50px white space (or blank space) margin on the left and right side of the web page, and zero on top-bottom. You can also use percentages if you want instead of pixels.

Method 2

You can also use this method instead :

body {
    margin: 0px 50px 0px 50px;
}

So the above property has four values starting from top, right, bottom and lastly left.

Note: Use the margin on the main parent element or container of the particular web page (which in the above case is the body) to see the effect on the whole web page and not just a particular container/element.