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 set Table width, height, color & padding using CSS?

Empty-cells

This property is used to set whether or not to display borders and background on empty cells in a table. It will work only if the border-collapse is set to separate. We can set this property to show (default) or hide.

Ex:-

table { table-layout: fixed; }

How to set Table width and Height?

We use width and height property to set table width and height.

We can also set table heading (th) width and height.

table { width: 100% ;}

th { height: 10px; }

How to set Table Padding?

This property is used to control the space between the border and the content in a table, this is used on <td> and <th> elements.

th, td { padding: 10px; }

How to set Table color?

table {background-color: pink;}

Tagged : / / / / / / /