Hello guys! evening and welcome to this section of my tutorial on CSS. In this tutorial i want to talk about CSS Paddings.
The padding property allows you to specify how much space should appear between the content of an element and its border.
The value of this attribute should be either a length, a percentage, or the word inherit. If the value is inherit, it will have the same padding as its parent element. If a percentage is used, the percentage is of the containing box.
The following CSS properties can be used to control lists. You can also set different values for the padding on each side of the box using the following properties:
- The padding-bottom specifies the bottom padding of an element.
- The padding-top specifies the top padding of an element.
- The padding-left specifies the left padding of an element.
- The padding-right specifies the right padding of an element.
- The padding serves as a shorthand for the preceding properties.
Now, lets take a look at how to make use of these properties with few examples.
The padding-bottom Property
The padding-bottom property sets the bottom padding of an element. This can take a value in terms of length of %.
Below is a short example:
<html>
<head>
</head>
<body>
<p style="padding-bottom: 10px; border: 2px solid black;">
This is a paragraph with a specified bottom padding.
</p>
<p style="padding-bottom: 3%; border: 2px solid black;">
This is another paragraph with a specified bottom padding in percent.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="padding-bottom: 10px; border: 2px solid black;">
This is a paragraph with a specified bottom padding.
</p>
<p style="padding-bottom: 3%; border: 2px solid black;">
This is another paragraph with a specified bottom padding in percent.
</p>
</body>
</html>
You can also read our tutorial post on: Css Fonts
The padding-top Property
The padding-top property sets the top padding of an element. This can take a value in terms of length of %.
Below is a short example:
<html>
<head>
</head>
<body>
<p style="padding-top: 10px; border: 2px solid black;">
This is a paragraph with a specified top padding.
</p>
<p style="padding-top: 3%; border: 2px solid black;">
This is another paragraph with a specified top padding in percent.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="padding-top: 10px; border: 2px solid black;">
This is a paragraph with a specified top padding.
</p>
<p style="padding-top: 3%; border: 2px solid black;">
This is another paragraph with a specified top padding in percent.
</p>
</body>
</html>
You can also read our tutorial post on: Html Document structure
The padding-left Property
The padding-left property sets the left padding of an element. This can take a value in terms of length of %.
Below is a short example:
<html>
<head>
</head>
<body>
<p style="padding-left: 10px; border: 2px solid black;">
This is a paragraph with a specified left padding.
</p>
<p style="padding-left: 3%; border: 2px solid black;">
This is another paragraph with a specified left padding in percent.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="padding-left: 10px; border: 2px solid black;">
This is a paragraph with a specified left padding.
</p>
<p style="padding-left: 3%; border: 2px solid black;">
This is another paragraph with a specified left padding in percent.
</p>
</body>
</html>
You can also read our tutorial post on: Html - Text Links
The padding-right Property
The padding-right property sets the right padding of an element. This can take a value in terms of length of %.
Below is a short example:
<html>
<head>
</head>
<body>
<p style="padding-right: 10px; border: 2px solid black;">
This is a paragraph with a specified right padding.
</p>
<p style="padding-right: 3%; border: 2px solid black;">
This is another paragraph with a specified right padding in percent.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="padding-right: 10px; border: 2px solid black;">
This is a paragraph with a specified right padding.
</p>
<p style="padding-right: 3%; border: 2px solid black;">
This is another paragraph with a specified right padding in percent.
</p>
</body>
</html>
The Padding Property
The padding property sets the left, right, top, bottom padding of an element. This can take a value in terms of length of %.
Below is a short example:
<html>
<head>
</head>
<body>
<p style="padding: 10px; border: 2px solid black;">
All four padding will be 10px.
</p>
<p style="padding:10px 3%; border: 2px solid black;">
Top and bottom padding will be 10px, while the left and right padding
will be 3% of the total width of the document.
</p>
<p style="padding:10px 3% 10px; border: 2px solid black;">
Top padding will be 10px, while the left and right padding will be 3% of the
total width of the document, and lastly the bottom padding will be 10px.
</p>
<p style="padding:10px 3% 10px 10px; border: 2px solid black;">
Top padding will be 10px, right padding will be 3% of the total width of the document, and .
lastly the bottom padding and top padding will be 10px.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="padding: 10px; border: 2px solid black;">
All four padding will be 10px.
</p>
<p style="padding:10px 3%; border: 2px solid black;">
Top and bottom padding will be 10px, while the left and right padding
will be 3% of the total width of the document.
</p>
<p style="padding:10px 3% 10px; border: 2px solid black;">
Top padding will be 10px, while the left and right padding will be 3% of the
total width of the document, and lastly the bottom padding will be 10px.
</p>
<p style="padding:10px 3% 10px 10px; border: 2px solid black;">
Top padding will be 10px, right padding will be 3% of the total width of the document, and .
lastly the bottom padding and top padding will be 10px.
</p>
</body>
</html>
Alright thats it for this tutorial on CSS paddings, always feel free to ask your questions in areas that you don't understand very well, your questions will be attended to as soon as possible.
Like our facebook page and also do subscribe with us in oder to get our tutorial posts delivered directly to your emails. Thanks for reading and bye for now.