point.comCSS Content, Padding, Border, Margin
These four properties content, padding, border, and margin are the most useful properties for layout design in CSS. We use these four properties to control the position of the content and to define the space outside and inside the elements.
CSS Content
In CSS, the content property is used with: :before and ::after pseudo-elements to insert generated content before or after the content of an element.
selector::before {
content: "text or URL";
}
selector::after {
content: "text or URL";
}
- content: Defines the content to be inserted, which can be text, images, or counters.
- ::before: Adds content before the selected element.
- ::after: Adds content after the selected element.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1::before {
content: ">> ";
color: red;
}
h1::after {
content: " <<";
color: red;
}
</style>
</head>
<body>
<h1>Important Heading</h1>
</body>
</html>
CSS Padding
The padding property is used to create space inside an element, between the content and its border. It is used to add space inside the element’s box, and padding is used on all four sides of the element.
selector {
padding: value;
}
selector {
padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;
}
Example
div {
padding: 10px 20px 30px 40px; /* top right bottom left */
}
CSS Border
In CSS, the border property is used to define the border around an element. The border property is used to set the border width, style, and color of an element’s border.
selector {
border: width style color;
}
- width: Specifies the border's thickness (e.g., 1px, 2em).
- style: Defines the border style (e.g., solid, dashed, dotted).
- color: Specifies the color of the border (e.g., #ff0000, red).
Border Styles
| Value | Description |
|---|---|
| solid | Solid line |
| dashed | Dashed line |
| dotted | Dotted line |
| double | Two solid lines |
| none | No border (useful to remove default borders) |
Example with Border and Padding
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
padding: 10px;
border: 2px dashed red;
margin: 20px;
}
</style>
</head>
<body>
<div>This div has padding, a dashed border, and margin.</div>
</body>
</html>
CSS Margin
The margin property is used to create space outside an element, between the element’s border and adjacent elements. It is used to manage the space between the elements of a layout.
Syntax
selector {
margin: value;
}
Example: Combining Content, Padding, Border, and Margin
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
content: "Boxed Content";
padding: 20px;
border: 2px solid #000;
margin: 15px;
width: 200px;
}
</style>
</head>
<body>
<div>This is a div with padding, border, and margin.</div>
</body>
</html>
Quickly Find What You Are Looking For
OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.
Color Picker
