What Is Margin And Padding In CSS

hello coder! today we see what is margin and padding in css with lots of examples. we explain margin and padding form all sides so after reading this article you master Css Margin and Padding,

CSS Margin

CSS Margins create space around or outside an element.

CSS Margins – Individual Sides

The following properties set the length of the margin on each side.

• margin-top: sets the margin area on top of an element
• margin-right: sets the margin area on the right side of an element
• margin-bottom: sets the margin area on the bottom of an element
• margin-left: sets the margin area on the left side of an element

Valid Values:

• <length>
• <percentage>
• auto: selects a suitable margin to use. For example, in certain cases, this value can be used to center an element.

Example:

Here is an example of using margins.

div {
margin-top: 30px;
margin-left: 90px;
background: lightgrey;
border: 1px solid red;
}

The margin surrounds a CSS box and pushes up against other CSS boxes in the layout. You’ll learn about CSS box models in the next few lessons.

50+ Html ,Css & Javascript Projects With Source Code

CSS Margin – Shorthand Property

The margin CSS property is a shorthand for the following properties:

• margin-top
• margin-right
• margin-bottom
• margin-left

The margin CSS property can have one, two, three or four values.

• When one value is specified, it applies the same margin to all four sides.
• When two values are specified, the first value applies to the top and bottom, the second to the left and right.
• When three values are specified, the first value applies to the top, the second to the left and right, the third to the bottom.
• When four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise) respectively.

Example:

/* one-value */
#div1 {
margin: 20px;
}
/* two values */
#div2 {
margin: 40px 20px;
}
/* three values */
#div3 {
margin: 20px 40px 20px;
}
/* four values */
#div4 {
margin: 40px 20px 40px 20px;
}

Horizontally Centering an Element

We can center an element by setting the left and right margins to auto.

div {
margin: 0 auto; /* same as margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto; */
width: 200px;
height: 200px;
background: lightgrey;
}

10+ Javascript Projects For Beginners With Source Code

The inherit Value

Since the inherit value is a global value it can work on almost all of the CSS properties.

Below is an example of a child element inheriting margin from its parent element.

div#parent {
margin-left: 50px;
border: 1px solid green;
}
p#children {
margin-left: inherit;
}

CSS Padding

CSS Padding creates space within an element.

It clears an area around the inside of an element.

CSS Padding – Individual Sides

The following properties set the length of the padding on each side.

• padding-top: sets the padding area on top of an element
• padding-right: sets the padding area on the right side of an element
• padding-bottom: sets the padding area on the bottom of an element
• padding-left: sets the padding area on the left side of an element

Valid Values:

• <length>
• <percentage>

Example:

Here is an example of different padding lengths on each side.

div {
padding-top: 30px;
padding-right: 50px;
padding-bottom: 70px;
padding-left: 90px;
background: lightgrey;
border: 1px solid red;
}

Portfolio Website using HTML and CSS (Source Code)

CSS Padding – Shorthand Property

The padding CSS property is a shorthand for the following properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

The padding CSS property can have one, two, three or four values.

• When one value is specified, it applies the same padding to all four sides.
• When two values are specified, the first value applies to the top and bottom, the second to the left and right.
• When three values are specified, the first value applies to the top, the second to the left and right, the third to the bottom.
• When four values are specified, the paddings apply to the top, right, bottom, and left in that order (clockwise) respectively.

Example:

/* one value */
#element1 {
padding: 20px;
}
/* two values */
#element2 {
padding: 10px 20px;
}
/* three values */
#element3 {
padding: 20px 10px 20px;
}
/* four values */
#element4 {
padding: 10px 20px 30px 40px;
}

Padding and Width

The CSS width property only specifies the width of an element’s content area. It does not include padding, borders and margins.

Therefore if an element has a specified width and padding they will be added together.

Example:

div {
width: 200px;
padding: 10px;
/* the actual rendered width of the element is now 220px */
background: blue;
height: 100px;
}

To keep the width at 200px we need to set the box-sizing property to border-box.

Increasing the padding will now decrease the content space inside the element. Example:

div {
width: 200px;
padding: 10px;
box-sizing: border-box;
/* the actual rendered width of the element is still 200px */
background: blue;
height: 100px;
}