CSS Margins, Padding, and Borders
CSS Margins, Padding, and Borders are properties used to add spacing and decorative elements to HTML elements. They can be used to create visual separation between elements, to add visual interest and decorative elements, or to control the overall layout of a web page.
Margins: Margins define the space between an element's border and the adjacent elements. They can be set using the margin property and can have different values for each side of the element (margin-top, margin-right, margin-bottom, and margin-left). Margins can be set in pixels, ems, rems, or percentages.
Padding: Padding is the space between an element's content and its border. It can be set using the padding property and can also have different values for each side of the element (padding-top, padding-right, padding-bottom, and padding-left). Like margins, padding can be set in pixels, ems, rems, or percentages.
Borders: Borders are decorative lines that can be added around an element. They can be set using the border property and have different values for the style, width, and color of the border. Borders can also be set for each side of the element (border-top, border-right, border-bottom, and border-left).
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* Set margin and padding for all elements */
* {
margin: 0;
padding: 0;
}
/* Set border and padding for the box element */
.box {
border: 2px solid blue;
padding: 20px;
}
/* Set margin for the header and footer elements */
header, footer {
background-color: lightblue;
color: white;
padding: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<div class="box">
<h2>Box with border and padding</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Tags:
CSS