Immortal Ideas
Adding Margin
White spacer is necessary for texts to look good on websites. We can leave some white space using Margin.
As you can see that the text below the "Who We Are" part is taking up the whole screen. It looks bad.
So let's use margin to leave some space on the right hand and left of the text.
Since we will leave white space for other paragraphs as well, let's use Class instead of ID to create a style sheet.
<!DOCTYPE html>
<html>
<head>
<style>
img.hero {
width:100%; height:auto
}
#Firstheading {
background-color: crimson;
color: white;
padding-bottom: 25px;
padding-top: 25px;
text-align: center;
}
h2.center-heading {
text-align:center;
font-size: 50px;
}
p.whitespace {
margin-left: 100px;
margin-right: 100px;
}
</style>
</head>
<body>
<h1 ID="Firstheading">Mars Calling. Get Your Tickets Now!</h1>
<img class="hero" src="Images/Mars-Photo.jpg">
<h2 class="center-heading">Who We Are?</h2>
<p class="whitespace">We are the premier Mars tourism services in India. Pack your bags and come to us.
We'll provide you a smooth ride to the Red Planet. Marvel at the alien civilization.
Explore the aesthetic beauty of the 4th rock from the sun.
You might even get to see some alien insects if you are lucky.
And then we will take you safely back to Earth. It will be a once in a lifetime experience.
Come. Buy the ticket to the Red Planet today!</p>
</body>
</html>
I used margin-left and margin-right, but there is a shortcut. Just use p.whitespace { 0px 100px 0px 100px }
In this case the first variable sets the top margin, the second variable sets the right hand side margin, the third variable sets the bottom variable, the fourth variable sets the left hand margin. It's easy to remember - top right bottom left.
