Scribd
Upload
6 views

4-CSS Margin-Padding

Uploaded by

zaranachothani22
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

4-CSS Margin-Padding

Uploaded by

zaranachothani22
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

1 CREATIVE DESIGN & MULTIMEDIA INSTITUTE

CSS Margin Properties



 The CSS margin properties are used to create space around elements,
outside of any defined borders.

 This property can have from one to four values.


o If the margin property has four values:
o margin :20px 40px 60px 80px;
 top margin is 20px
 right margin is 40px
 bottom margin is 60px
 left margin is 80px

o If the margin property has three values:


o margin :20px 40px 60px;
 top margin is 20px
 right and left margin are 40px
 bottom margin is 60px
2 CREATIVE DESIGN & MULTIMEDIA INSTITUTE

o If the margin property has two values:


o margin :20px 40px;
 top and bottom margin are 20px
 right and left margin are 40px

o If the margin property has one value:


o margin :20px;
 all four margin are 20px

o margin-top: 10px;
o margin-bottom: 10px;
o margin-left: 10px;
o margin-right: 10px;

 Note: Negative values are allowed.


 Syntax:
margin: length | auto;

 length - specifies a padding in px, pt, cm, etc.

 % - specifies a padding in % of the width of the containing element.

 Auto - The browser calculates a margin


3 CREATIVE DESIGN & MULTIMEDIA INSTITUTE

CSS Padding Properties


 An element's padding is the space between its content and its border.
 This property can have from one to four values.

o If the padding property has four values:

 padding:10px 20px 30px 40px;


 top padding is 10px
 right padding is 20px
 bottom padding is 30px
 left padding is 40px

o If the padding property has three values:

 padding:10px 20px 30px;


 top padding is 10px
 right and left padding are 20px
 bottom padding is 30px
4 CREATIVE DESIGN & MULTIMEDIA INSTITUTE

o If the padding property has two values:

 padding:10px 20px;
 top and bottom padding are 10px
 right and left padding are 20px

o If the padding property has one value:

 padding:10px;
 all four paddings are 10px

o padding-top: 10px;
o padding-bottom: 10px;
o padding-left: 10px;
o padding-right: 10px;

 Note: Negative values are not allowed.


 Syntax:
padding: length;

 length - specifies a padding in px, pt, cm, etc.


 % - specifies a padding in % of the width of the containing element.
5 CREATIVE DESIGN & MULTIMEDIA INSTITUTE

CSS Float Properties


 The float property specifies whether an element should float to the left,
right, or not at all.
 Syntax:
float : none | left | right ;
6 CREATIVE DESIGN & MULTIMEDIA INSTITUTE

CSS calc() Function


 The calc() function performs a calculation to be used as the property
value.
 Syntax:
calc(expression)

Value Description
Required. A mathematical expression. The result
expression will be used as the value.The following operators
can be used: + - * /

You might also like