CSS Padding: The “padding” is the space between the border and the content. So, for example, in our main header, the padding is the space between the text and the border. The padding is colored yellow using the background-color property to make it easier to see. Now let’s practice adjusting the padding of our main header so that it doesn’t look so crowded.
CSS Padding Example
Open your “styles.css” file and add the following declaration to the style rules for your h1 element”padding:20px;”. Now your CSS code for your “header1” element should look as follows:
h1 {
color: green;
font:bold 2em Tahoma;
background-color:yellow;
border: 5px solid red
padding:20px;
}
CSS Padding Example Output
Save the “styles.css” file. Next, open your “index.html” file and click “Run” on your Notepad++ taskbar to launch this file in Chrome or the browser of your choice. Your browser window should appear as follows:
NOTE: The padding in the main header has increased, i.e., there is more space between the text and the border.
CSS Padding Example 2
Now let’s adjust the margins on our home page. Add the declarations “margin-top:30px;”, “margin-left:50px;”, and “margin-right:50px;” to the CSS code for the body element. Your CSS code for the body element should look as follows:
body {
color: rgb(255,0,0);
font-family:"Courier New";
margin-top: 30px;
margin-left:50px;
margin-right:50px;
}
CSS Padding Example 2 Output
Save your “styles.css file, and once again open your “index.html” file and click “Run” on your Notepad++ taskbar to launch this file in Chrome or the browser of your choice. Your browser window should appear as follows:
NOTE: The empty space on the top of the webpage is now 30 pixels long, and the empty space on both sides of the web page are now 50 pixels wide