Foundation of HTML:-Box Model
In the layout of a web page every tag is represented in form of boxes. All the boxes are arranged together to give a proper desired layout to the web page. These boxes are then fascinated to make it more attractive by adding colour to the background. All these layouts are designed with the use of CSS(Cascading Stylesheet).
These boxes represented in layout has certain properties, which can be changed to give desired shape of the boxes.
These properties are:- Height/Width/Padding/Border/Margin
Height-Width:-
There is certain height and width given to the boxes. These height and width is assigned to make a proper layout of boxes and are having flexible value in accordance with the user’s desire. The value of these height and width are assigned in three ways:- length/percentage/auto
height: 20px;
width: 20px;
Padding:-
Padding is the space occupied between content part and border of the box. This space is given for beautification of content inside the content box. Padding gives more flexibility to users for beautification of content box. 1.padding-right
2.padding-left
3.padding-top
4.padding-bottom
Padding accepts the value in terms of :- length/percentage
padding: 35px;
Border:-
Border is the outer layout of the boxes. It is between padding area and margin. It has a variety of designs for beautification of boxes and depends on users for fascinating the desired side of boxes. Some common property of Box are:- 1.border-width
2.border-color
3.border-style
border: 1px solid red;
Margin:-
It is the outer surrounding area of box. User can give margin to any of the desired side or whole at once. It has common property as :-
1.margin-top
2.margin-bottom/margin-left/margin-right.
margin:30px;
Display Property:-
Boxes are displayed in variety of ways :- inline/block/inline-block .There are few tags which poses certain display property by default. In box model user uses these tags as their block level element
<h1> — <h6>
<p>
<form>
<header>
<footer>
<section>
<div>
<section>
and as inline element
<a>
<img>
<span>
The default display property can be changed by users by using
display:inline;
Box-sizing Property:-
Border-box :-
This includes everything inside the content box. Let it be border, padding width.Only margin is outside of the box area.
Content-box :-
This includes everything out of the content box. Be it about the area which covers margin, padding, border.
Advance Box Manipulation
There are certain other things which can be used to manipulate the behaviour of boxes.
1.Overflow -If content is more than defined area then it comes out of the box and is said to overflowing of content. This can be improved by using auto/hidden/visible.
overflow:auto;
2.Background clipping- we can add background to any boxes and it has property of clipping it to border or padding area.
3.Outline- It is an another property of box model. This facilitates user to provide colour as outline of any box after margin. But it does not occupy any space on display. It is only used for beautification purpose.
Debuging
The web page can be used to debug the boxes placed at its position. This gives exact idea about placing of boxes on it place. If it is placed at incorrect position the it is either removed or placed properly. It can be done by browser by inspecting it.
