Scribd
Upload
10 views

4-CSS Margin-Padding

Uploaded by

zaranachothani22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

4-CSS Margin-Padding

Uploaded by

zaranachothani22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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