Immortal Ideas
Padding
Padding makes a particular area larger. It helps make a element take up more space than what it has by default.
Let's make the red background of the heading take up more space.
<!DOCTYPE html>
<html>
<head>
<style>
img.hero {
width:100%; height:auto
}
#Firstheading {
background-color: crimson;
color: white;
padding-bottom: 50px;
}
</style>
</head>
<body>
<h1 ID="Firstheading">Mars Calling. Get Your Tickets Now!</h1>
<img class="hero" src="Images/Mars-Photo.jpg">
</body>
</html>
The result is -
The text and background are not in sync. I want the text to be in the middle of the red background. So instead of increasing the bottom padding by 50px, I will increase the top and bottom padding by 25px each.
<!DOCTYPE html>
<html>
<head>
<style>
img.hero {
width:100%; height:auto
}
#Firstheading {
background-color: crimson;
color: white;
padding-bottom: 25px;
padding-top: 25px;
}
</style>
</head>
<body>
<h1 ID="Firstheading">Mars Calling. Get Your Tickets Now!</h1>
<img class="hero" src="Images/Mars-Photo.jpg">
</body>
</html>
