How to use css margin

 What is CSS margin?

The gap between any elements of the web pages is known as margin.

 there is 3 type of margins left margin right margin-top margin and bottom margin.


css margin

why we use a margin on web pages?

 All the website on the internet design by the CSS and any gap between any elements or defining the position of the element on the webpage we use Margin in the CSS.


sometimes we use texts or images on the web pages that look beautiful at a certain position and the distance between the other elements.

In the maximum time gap between the elements outer gaps. we are just with the help of margin as compared to position or padding in CSS.


How we remove the default margin on the web page?


we can remove the default margin by applying the following CSS code.

*{

margin :0;

}


What are different ways of giving margin in CSS? 


There are different ways of giving margin in CSS.

Manually write:

 

P{

magin-left:30px;

magin-right:30px;

magin-bottom:30px;

magin-top:30px;

}

Shortcut of giving margin values.

Give only one value

p{

Margin:50px;}


Its mean Top left right bottom are 50 pixel. 

Give only two values.

p{

margin :50px auto;

}


Give all the four values

its mean top margin 50 pixel  bottom margin 50 pixel left And  right auto.

give for values.

p{

margin: 50px,40px,30px,20px;

}




its means 50 pixel top margin 40 pixel right margin 30-pixel bottom margin and 20 pixel left margin.


Examples:

 

 div{

Border:black solid 1px;

Padding:10px;

margin: 10px,20px,30 px,40px

}


In the above example border of the division, black solid one-pixel padding 10 pixels and margin top 10 pixels write 20 picture bottom 30 pixels and left  14 pixels. This is rule first value is top second value is right third value is bottom and the fourth value is left.



Comments

Popular posts from this blog

Diferrence between flutter and react native

Flutter Widgets

How to format in HTML