Border, Padding & Margin
Borders:-
Borders can be applied to most HTML elements within the body. To make a border around an element, all you need is border-style . The values can be solid , dotted , dashed , double , groove , ridge , inset and outset . border-width sets the width of the border, most commonly using pixels as a value.
Border represents the edge of a CSS box, which extends around the padding and the content, the margin is 0, being invisible, but it is possible to set the style, thickness or color of the border.
Border Properties:-
The
border property is a shorthand property for:-
border-style.
border-color.
Syntax:-
border: border-width border-style border-color|initial|inherit;
Example:-
<html>
<head>
<style>
h1 {
border: 5px solid red;
}
h2 {
border: 4px dotted blue;
}
div {
border: double;
}
</style>
</head>
<body>
<h1>A heading with a solid red border</h1>
<h2>A heading with a dotted blue border</h2>
<div>A div element with a double border.</div>
</body>
</html>
Padding :-
An element's padding is the space between its content and its border. The padding property is a shorthand property for: padding-top. padding-right.
The padding property may be specified using one, two, three, or four values. Each value is a
<length> or a <percentage>. Negative values are invalid.- When one value is specified, it applies the same padding to all four sides.
- When two values are specified, the first padding applies to the top and bottom, the second to the left and right.
- When three values are specified, the first padding applies to the top, the second to the left and right, the third to the bottom.
- When four values are specified, the padding apply to the top, right, bottom, and left in that order (clockwise).
<length><percentage>
padding: length|initial|inherit;
Example:-
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding: 35px;
}
p.ex2 {
border: 1px solid red;
margin: 35px;
}
</style>
</head>
<body>
<h1>The padding Property</h1>
<p class="ex1">This paragraph has a padding of 35 pixels on all four sides.</p>
<p class="ex2">This paragraph has no specified padding, but a margin of 35 pixels on all four sides.</p>
</body>
</html>
Note : Padding creates extra space within an element, while margin creates extra space around an element!
Margin:-
The margin property defines the space around an HTML element. It is possible to use negative values to overlap content.
The values of the margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal.
The Margin Property:-
- margin-top
- margin-right
- margin-bottom
- margin-left
We have the following properties to set an element margin.
- The margin specifies a shorthand property for setting the margin properties in one declaration.
- The margin-bottom specifies the bottom margin of an element.
- The margin-top specifies the top margin of an element.
- The margin-left specifies the left margin of an element.
- The margin-right specifies the right margin of an element.
Syntax:-
margin: length|auto|initial|inherit;
Example:-
<html>
<head>
<style>
p.ex1 {
margin: 35px;
}
</style>
</head>
<body>
<h1>The margin Property</h1>
<p>A paragraph with no specified margins.</p>
<p class="ex1">This paragraph has a margin of 35 pixels on all four sides.</p>
<p>A paragraph with no specified margins.</p>
</body>
</html>
0 Comments