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: + - * /
