Use of padding, border and margins

Padding

Border

We use a border to a CSS box as our requirements. When creating a web page, we have to look after many things per size or position. So we give border value as that will fit there.

Let’s take some example and their syntax.

  • For border 0 à   border-width: 0px;
  • For border 4 à border-width: 4px;
  • For border 8 à border-width: 8px;
  • For border 12 à border-width: 12px;

Padding

Let’s know how to use padding.

Syntax –

  • padding: all;
  • padding: top_bottom left_right;
  • padding: top right_left bottom;
  • padding: top right bottom left;

Some examples –

  • padding: 7px;
  • padding: 12%;
  • padding: 10px 7% 10% 15px;
  • We can use a fixed value or percentage value for it.
  • We can use combined fixed and percentage values in the CSS padding property.
  • We can also use – padding-top, padding-bottom, padding-left, and padding-right.

Margin

CSS margin property works similarly like padding.

Syntax –

  • margin: all;
  • margin: top_bottom left_right;
  • margin: top right_left bottom;
  • margin: top right bottom left;

Some examples –

  • margin: 5px;
  • margin: 10%;
  • margin: 10px 5% 8% 7px;
  • We can use a fixed value or percentage value for it.
  • We can combine fixed values and percentage values in the CSS padding property.
  • We can also use – padding-top, padding-bottom, padding-left, and padding-right.

Leave a Reply

Your email address will not be published. Required fields are marked *