CSS Box Model
Every HTML element that can be displayed is considered as a box. In CSS, the term 'box model' is used to represent border, padding and margin of the HTML element. The image below illustrates the box model:
Let us discuss all these 3 properties (border, margin, padding) of box model in detail.
CSS Border Property
The CSS border property allow you to define the border style, border width, and border color of an HTML element.
border-width: specifies the width of the four borders. The width can be specify in px, pt, cm, em, etc or by using one of the three pre-defined values: thin, medium, or thick.
border-style: specifies what kind of border to display. The border can have a predefined style like, solid, double, dotted, dashed, groove, ridge, inset, outset, none, or hidden.
border-color: is used to set the color of the four borders. The color can be set by color name, like "red", Hexa code, like "#ff0000", by RGB value, like "rgb(255,0,0)" or transparent
| CSS Border Property | Description |
|---|---|
| border-width | Specify the width of border. Syntax: border-width: 5px; border-width: thin | medium | thick; |
| border-style | Specify the style(type) of border. Syntax: border-style: solid | dotted | dashed | double | groove | ridge | inset | outset; |
| border-color | Specifies the border color. Syntax: border-color: blue |
| All above 3 properties in one line | border: 8px ridge red; |
| One-side border | border-top:5px solid green; border-bottom: 8px grove orange; border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; border-style: dotted solid double; /* top, left right, bottom */ border-style: dotted solid double dashed; /* top,right, bottom, left */ |
CSS Padding Property
CSS Padding property is used to specify the spacing between the border and the content i.e. inside the container. Padding property may change the height and width of the element.
| CSS Padding Property | Description |
|---|---|
| padding:50px; | Set equal padding from all four sides |
| padding:10px 50px; | top&bottom:10px (length), left&right:50px (breadth) |
| padding:10px 30px 50px; | top:10px, left&right:30px, and bottom:50px |
| padding:10px 20px 30px 40px; | Set all 4 sides padding in one line.(top,right,bottom,left) |
| padding-top:10px; padding-bottom:20px; padding-left:30px; padding-right:40px; | You can mention padding differently |
CSS Margin Property
CSS Margin property is used to specify the spacing outside the container.
| CSS Margin Property | Description |
|---|---|
| margin:50px; | Set equal margin from all four sides |
| margin:10px 50px; | top&bottom:10px (length), left&right:50px (breadth) |
| margin:10px 30px 50px; | top:10px, left&right:30px, and bottom:50px |
| margin:10px 20px 30px 40px; | Set all 4 sides margin in one line.(top,right,bottom,left) |
| margin-top:10px; margin-bottom:20px; margin-left:30px; margin-right:40px; | You can mention margin differently |
