Do you really want to learn CSS?
Learn CSS is easy if you know the right path of the information provider about style sheet tutorial.
But with the technological evolution or breakthrough in blogging, it is not possible for everyone to search the absolute information on the net.
However +Google is continuously making lots of efforts to provide the best search result but the the search result is not as per the requirement of the searcher yet.
It will take a time to produce the 100% relevant search result about the topic.
So, we decided to create a blog with the in-depth information about learning CSS or style sheet.
Today's topic is CSS Margins.
CSS Margins are outer space between the two or more. In other words, a css margin it the space all around an element.
Margins are of 4 sides/types and it is a Clock wise direction in coding:-
- Margin-Top
- Margin-Right
- Margin-Bottom
- Margin-Left
By default are side has margin existed but with your CSS coding you can either remove or extend margin of 4 the sides.
The margin property can be set for the top, left, right and bottom of an element. (See below example)
You can also declare a margin value in a single row as it is shown in below example:-
You can read 4 sided margin as TRBL (This term is first ever used by CSSBasicTips).
The margin property can be set for the top, left, right and bottom of an element. (See below example)
Syntax of 4 sided margin:-
margin-top:Value;
margin-right:Value;
margin-bottom:Value;
margin-left:Value;
/*NOTE:- A margin value could be in Pixel, Percentage or auto etc.*/
margin-top:Value;
margin-right:Value;
margin-bottom:Value;
margin-left:Value;
/*NOTE:- A margin value could be in Pixel, Percentage or auto etc.*/
You can also declare a margin value in a single row as it is shown in below example:-
For setting all 4 sided margin use TRBL format. Example:-
margin:T R B L; (Top, Right, Bottom, Left)
margin: 10px 20px 30px 40px;
/*NOTE:- A margin value should read clock wise.*/
If values of all sided margin is same then use the following syntax:-
margin:10px; /*4 sides margin*/
margin:-10px; /*negative margin of 4 sides*/
margin:10px 20px; /*top, right margin*/
margin:10px 20px 30px; /*top,right, bottom*/
/*This will set 10px margin for all 4 sides*/
/*You can also set a negative margin value*/
/*You can also set margin of two sides*/
/*You can also set margin of three sides*/
margin:T R B L; (Top, Right, Bottom, Left)
margin: 10px 20px 30px 40px;
/*NOTE:- A margin value should read clock wise.*/
If values of all sided margin is same then use the following syntax:-
margin:10px; /*4 sides margin*/
margin:-10px; /*negative margin of 4 sides*/
margin:10px 20px; /*top, right margin*/
margin:10px 20px 30px; /*top,right, bottom*/
/*This will set 10px margin for all 4 sides*/
/*You can also set a negative margin value*/
/*You can also set margin of two sides*/
/*You can also set margin of three sides*/
You can read 4 sided margin as TRBL (This term is first ever used by CSSBasicTips).
0 comments:
Post a Comment