box-model docs.md

#box model

In each element in the browser which have an individual padding, margin,and border is

called box-model.

#padding

 Padding property is used to set the spacing inside the cointainer.

properties****

padding-top

padding-bottom

padding-right

padding-left

In the padding property we use to spaces of an cointainer which we will be want.

> properties we use to as a padding:10px 20px (this indicates the top nd bottom 10px and left nd right

20px of an container)

> padding:10px(this takes all sides of an container)

#margin

In the property we use to spacing the outside of the cointainer.

properties****

 margin-top

 margin-bottom

 margin-right

 margin-left

In the margin property we use to spaces of an cointainer which we will be want.

> properties we use to as a margin:10px 20px (this indicates the top nd bottom 10px and left nd right

20px of an container)

> margin:10px(this takes all sides of an container)

#border

border property is used to frame an element.

border 2px solid black(border will be make in the coinatiner tags)

properties****

border-top

border-bottom

border-right

border-left

> border:2px solid green (this takes all sides of an container to frame the border of an container)

#box model sizing:

By default box-model the width or height provided by the box-model is includes padding and border.margin is not 

included as a box-model.

i)Extrinsic sizing

ii)Intrinsic sizing

#Extrinsic sizing

If we gave an total width of an cointainer(200px) and if we add margin 10px

and padding 10px atlast the browser will takes is 220px outside the cointainer(browser default behaveiour).

#Intrinsic sizing

If we gave the total width of an cointainer (200px) and if we add margin 10px

and padding 10px atlast the browser will takes an 180px which will reduce, to see the changes will happen

in the developer console.

#If we will change the default behaveiour than we will use the Box-sizing.

1.content-box

2.border-box

#1.content-box

In the box-sizing which will takes the content overlapped.

Eg:box-sizing:content-box

#2.Border-box

In the box-sizing which will  takes the content with out any effect

Eg:box-sizing:border-box(All these are see in the developer console)

#display elements

1.Block

2.Inline

3.Inline-block

#1.Block:

In the element which will takes as the column wise manner in the cointainer.

Eg:

1

2

#2.Inline-block:

In the element which will takes as the inline as an block of an element

Eg: you will gave an width and heigth it will be perfectly works.

1

2

#3.Inline:

In the element which will takes as the row wise manner in the cointainer.

Eg:which will u gave the width and height of an element it does not works.

123