Margins and Padding in CSS | Margin Padding difference - codewithrandom

Margins and Padding in CSS | Margin Padding difference - codewithrandom

Margins and Padding in CSS | Margin Padding difference - codewithrandom


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.

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 toprightbottom, 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;  
 }  

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;  
 }  


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 toprightbottom, 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;  
 }  

Check out more






Post a Comment

Previous Post Next Post