CSS Padding
CSS Padding
Chapter - 20 : Borders and Dimensions (CSS Padding): (Page 5/6)
(Cotinued from previous page)
b) For individual sides:
Margin-top:10px; margin-right:15px;
margin-bottom:12px; margin-left:6px;
in this case the margin is different for all 4 sides
c) For Combination sides : The CSS also allows defining the margins for 4 sides in one line or in the combinations of two sides. In all the following cases the sequence and combination is fixed as defined below
a) All four sides are defined
margin:10px 15px 12px 6px;
The web browser will take sequence as top - right - bottom - left
b) Only three margins are defined
margin:10px 15px 12px;
The web browser will take 1st value for top, 2d value for left and right and 3rd value for bottom
c) Only two margins are defined
margin:10px 12px;
The web browser will take 1st value for top & bottom and 2d value for left and right
20.5- Padding: The padding is the space between the element border and the element content. It may be noted that it is inside the border, where as the margin was outside the border. The padding clears an area around the content (inside the border) of an element. In similar lines of border and margin the padding can also be defined by different ways, but It may be noted that padding is not defined in terms of 'Auto'.
i) % : in this case the padding is a % of the containing element. Therefore if the size of element increases the padding will also increase.
padding:1%;
ii) In single line : in this case the padding is same for all 4 sides
padding:1px;
(Cont......... to next page (Pg-6))
© funandhobby.com (CSS Padding)