Padding

Padding makes a particular area larger. It helps make a element take up more space than what it has by default.

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram

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>

Screenshot_2021-10-12_10-51-18.png