How to Use Padding Property in CSS?

Its shorthand padding property It declares all padding properties in one single line. We can set this property to length in the form of %, cm, px etc.

Padding Property

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

Padding

This property is used to set the padding of specified element.

Ex: –

img { padding: 10px 20px 30px 40px;}

padding-left

This property is used to set left padding of element. We can set this property to length in the form of %, cm, px etc.

Ex: –

img { padding-left: 20%; }
h1 { padding-left: 40px; }

padding-right

This property is used to set right padding of element. We can set this property to length in the form of %, cm, px etc.

Ex: –

img { padding-right: 20%; }
h1 { padding-right: 40px; }

padding-top

This property is used to set top padding of element. We can set this property to length in the form of %, cm, px etc. 

Ex: –

img { padding-top: 20%; }
h1 { padding-top: 40px; }

padding-bottom

This property is used to set bottom padding of element. We can set this property to length in the form of %, cm, px etc.

Ex: –

img { padding-bottom: 20%; }
h1 { padding-bottom: 40px; }

Tagged : / / / / / / /

How to use Margin Property in CSS?

margin

Its shorthand margin property It declares all margin properties in one single line. We can set this property to auto or length in the form of %, cm, px etc. It is by default set 0px.

When we set auto value browser decide the margin. 

Ex: –

img { margin: 10px 20px 30px 40px;}

Margin Property

This property is used to set the margin of specified element.

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

margin-left

This property is used to set left margin of element. We can set this property to auto or length in the form of %, cm, px etc. It is by default set 0px.

When we set auto value browser decide the margin. 

Ex: –

img { margin-left: 20%; }
h1 { margin-left: 40px; }
p { margin-left: auto; }

margin-right

This property is used to set right margin of element. We can set this property to auto or length in the form of %, cm, px etc. It is by default set 0px.

When we set auto value browser decide the margin. 

Ex: –

img { margin-right: 20%; }
h1 { margin-right: 40px; }
p { margin-right: auto; }

margin-top

This property is used to set top margin of element. We can set this property to auto or length in the form of %, cm, px etc. It is by default set 0px.

When we set auto value browser decide the margin. 

Ex: –

img { margin-top: 20%; }
h1 { margin-top: 40px; }
p { margin-top: auto; }

margin-bottom

This property is used to set bottom margin of element. We can set this property to auto or length in the form of %, cm, px etc. It is by default set 0px.

When we set auto value browser decide the margin. 

Ex: –

img { margin-bottom: 20%; }
h1 { margin-bottom: 40px; }
p { margin-bottom: auto; }

Tagged : / / / / / / /

How to use the position property in CSS to align elements?

In This tutorial, I am going to explain that how to How to use the position property in CSS to align elements? Below Property to uses in align elements-

Position-

  • Left
  • Right
  • Bottom
  • Top
  • static
  • Fixed
  • Relative
  • Absolute

Length (cm, px, %)

Left Align Property-

  • left: auto
  • left: 55px
  • left: 50%

Right Align Property-

  • right: auto
  • right: 23px
  • right: 50%

Bottom Align Property-

  • bottom: auto
  • bottom: 23cm
  • bottom: 40%

Top Align Property-

  • top: auto
  • top: 20%
  • top: 40px

static

When we set static position for an element then it is not positioned in any special way, it is always positioned according to the normal flow of the page. left, right, top and bottom property won’t work with static position.

Ex: –

h1 {
position: static;
border: 5px solid red;
}

h1 {
position: static;
border: 5px solid red;
left: 50px;
}

fixed-

When we set fixed position for an element it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

img {
position: fixed;
right: 0;
top: 50%;
border: 3px solid red;
}

relative-

When we set relative position for an element, elements positioned to its normal flow.

h1 {
position: relative;
left: 50px;
border: 3px solid red;
}

absolute-

When we set absolute position for an element, element is positioned to the nearest positioned ancestor. If there is no positioned ancestor then it follow the normal position according to browser.

div {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid red;
}

Absolute Positioning Inside Relative Positioning | CSS-Tricks

These properties are used to position an element.

We can not use any of these properties without setting up position property.

Tagged : / / / / / / / /