Padding refers to the space between the content of an element and its border. It is used to create space around an element's content, inside the element's border. Padding can be applied to all sides of an element (top, right, bottom, and left) or individual sides can be targeted using shorthand or individual properties.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam.</p>
</body>
</html>
Our simple, usual html.
body {
background: lightblue;
}
p {
border-style: solid;
border-width: 20px;
border-color: red;
background: yellow;
margin: auto;
width: 500px;
padding: 25px;
}
This CSS code sets a light blue background for the entire webpage using the body selector.
The p selector sets a solid red border with a width of 20px and a yellow background color for all paragraphs on the page. The margin property is set to auto, which centers the paragraph horizontally within its container.
The width property is set to 500px, which sets the width of the paragraph to 500 pixels. Finally, the padding property is set to 25px, which adds 25 pixels of padding to the content within the paragraph.
body {
background: lightblue;
}
p {
border-style: solid;
border-width: 20px;
border-color: red;
background: yellow;
margin: auto;
width: 500px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 25px;
padding-left: 50px;
}
You can play around with padding combinations.
body {
background: lightblue;
}
p {
border-style: solid;
border-width: 20px;
border-color: red;
background: yellow;
margin: auto;
width: 500px;
padding: 5px 10px 25px 50px;
}
The CSS property padding is used to add space between the content of an element and its border.
The value 5px will set the padding for the top side of the element, 10px for the right side, 25px for the bottom side, and 50px for the left side.
So the element will have 5 pixels of padding on the top side, 10 pixels of padding on the right side, 25 pixels of padding on the bottom side, and 50 pixels of padding on the left side.
No comments:
Post a Comment