CSS Box Model

All the Elements in HTML are work in Box model, means working with padding, margin and border.

First outer thing in element is margin, then comes border, then area of padding, then in last text or content or any other element comes.

margin

Most outer space is margin, that works in between border and other elements margin or parents padding.

We can give margin in 4 ways - Margin-top : _ _;- for top side margin. Margin-right : _ _; - for right side margin. Margin-bottom : _ _; - for bottom side margin. Margin-left : _ _; - for left side margin.

Shorthand for all four is - *margin : _top_ _right_ _bottom_ _left_;*

If only one value is given then work on all sides with same value and when 2 values are given then work first value with top-bottom and second value work with right-left

div {
        margin : 50px ;
}

Border

Under margin next is border, that works between margin and padding.

We can give border in 4 ways - border-top : _ _; - for top side border. border-right : _ _; - for right side border. border-bottom : _ _; - for bottom side border. border-left : _ _; - for left side border.

We have other properties available for border -

border-color : _ _; - for giving border color.

values can be given by directly name or rgb, hex and other method.

border-style : _ _;- The border-style property specifies what kind of border to display.

values - dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden

We can give different values for all side different border. *border-style : _top_ _right_ _bottom_ _left_;*

You can see image with differnt border style-

Short hand for border- border : _size_ _style_ _color_ ;

div {
  margin: 50px;
  border: 10px solid #4CAF50;
}

Padding

Padding works between border and text or content, when padding increase then according to content border and margin size also increase.

We can give padding in 4 ways - padding-top : _ _; - for top side padding. padding-right : _ _; - for right side padding. padding-bottom : _ _; - for bottom side padding. padding-left : _ _; - for left side padding.

Shorthand for all four is - *padding : _top_ _right_ _bottom_ _left_;*

div {
  margin: 50px;
  border: 10px solid #4CAF50;
  padding: 10px 50px 100px 200px;
}

All codes are here -

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 50px;
  border: 10px solid #4CAF50;
  padding: 10px 50px 100px 200px;
}
</style>
</head>
<body>

<h2>CSS Padding</h2>

<div>This element has a margin of 50px and a border of 10px solid </div>

</body>
</html>

Thankyou For Reading, give suggesions if any

CSS Box Model

Table of contents

CSS Box Model

margin

Border

Padding