ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
FAQ
Login
 
CSS Tutorial - Index
CSS Tutorial - Introduction to CSS
CSS Tutorial - Basic CSS Concepts
CSS Tutorial - Linking Style Sheets
CSS Tutorial - Text Formatting
CSS Tutorial - Backgrounds
CSS Tutorial - Fonts
CSS Tutorial - Borders
CSS Tutorial - Margins and Padding
CSS Tutorial - Lists
CSS Tutorial - Dimensions
CSS Tutorial - Display and Positioning
CSS Tutorial - Pseudo Classes and Elements
CSS Tutorial - W3 Standards,Validation of Style
     

 
Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses
   

   
   
   
   
   
   

   
  Home > Courses, Tutorials & eBooks > CSS Tutorial > Working with Margins and Padding
 
Previous

CSS Tutorial - Working with Margins and Padding

 
                                                                                      Page 1 of 2
 
Overview
 

In this chapter you will learn:

  • Definition of margin and padding
  • Setting margin around an element and  its corresponding individual edges
  • Difference between padding and margin
  • Setting padding around each edge of an element

This chapter elucidates the concept of margins and paddings. A margin is a space on the outside of the element, whereas padding is the space inside the element.

Margin

CSS allows any element to have a margin.                      

  • A margin is the space between an element and the elements to its top, left, bottom and right. CSS margin properties let you define the space around elements.
  • Possible values for margin properties are length, percentage and auto.
      length - It defines a fixed margin.
      percentage - It defines margin in percentage with respect to the parent element's width.
      auto- With this value, the browser sets a margin.
  • Negative values are permitted, to overlap content.
  • The default value for margin is zero.

A shorthand margin property can be used to change all the margins at once. Also, the margin property can be used to set a different value for each edge of the element. For this purpose, more than one value for the property is to be used. These are discussed below.

  • One margin value specifies the same margin for every edge.
Example

h1{margin : 5 px;},

In this, all four margins will be 5 pixels.

 
  • With two margin values, the first value specifies the margin of the top and bottom edges, the second value specifies the margin of the left and right edges.
Example

p { margin : 5px 15 cm;}

In this, the top and bottom margins will be 5 pixels, left and right margin will be 15 cm .

 
 
  • If three margin values are specified, the first value specifies the color of the top edge, the second value is set for the left and right edges, and the third value for the bottom edge.
Example

p { margin : 5 px  10% -5px;}

In this, the top margin will be 5 pixels, left and right margins will be 10% of the total width of the document, and the bottom margin will be -5 pixels.

 
  • With four margin values, the four margin values specify the margin of the top, left, bottom and right respectively.
Example

h1 { margin : 10 px  5% -15px auto;}

In this, the top margin will be 10 pixel, right margin will be 5% of the total width of the document, bottom margin will be -15 pixel, and the left margin will be set by the browser.

 
  • CSS margin properties can also be explicitly defined corresponding to each edge. Separate properties can be set for top, bottom, left, right margins. These are given below:

Margin-Bottom

This property sets the bottom margin of an element.                        

Example

p { margin-bottom : 20px;}

Margin specifies one or more exterior gutters of an element. In this example, bottom margin is 50 pixels.

 

Margin-Top

This property sets the top margin of an element.

Example

p { margin-top : -30px;}

 

In this example, top margin is 30 pixels.

 

Margin-Left

This property sets the left margin of an element.

Example

p { margin-left : 20%;}

In this example, left margin is 20% of the total width of the document.

 

Margin-Right

 This property sets the right margin of an element.

Example

p { margin-right : 50%;}

In this example, right-margin is 50% of the total width of the document.

 
 
   

 

 
     
Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
 
© ExpertRating 2015. All Rights Reserved.