CSS – Padding
CSS – Padding
The padding property of CSS specifies the space between the content and its border of the element. The attribute’s value must be in length (as px) or in percentage (%). It has the following properties,
padding -bottom: it specifies the bottom padding of the paragraph.
padding -top: it specifies the top padding of the paragraph.
padding -left: it specifies the left padding of the paragraph.
padding -right: it specifies the right padding of the paragraph.
padding: this property sets all four types of padding in one statement.
Example:
<html>
<head>
</head>
<body>
<p style = "padding-bottom: 15px; border:1px solid black;">
This demonstrates specified bottom padding with px
</p>
<p style = "padding-top: 5%; border:1px solid black;">
This demonstrates specified top padding in percent
</p>
<p style = "padding-left: 25px; border:1px solid black;">
This demonstrates specified left padding with px
</p>
<p style = "padding-right: 5%; border:1px solid black;">
This demonstrates specified right padding in percent
</p>
<p style = "padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px-shorthand properties
</p>
</body>
</html>
Output:
Quiz :
Quiz 1: What are the various properties used in padding using CSS?
Quiz 2: How can you set all types of padding properties in one declaration? Give examples.
