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 2 of 2

 

Padding

 Padding specifies one or more interior margins or gutters of an element.

  • It specifies the amount of space between the element content and its border.
  • Possible values for padding properties are length and percentage.
    length - It defines a fixed padding.
    percentage - It defines padding in percentage with respect to the parent element's width.
  • Negative values are not permitted.
  • The default value for padding is zero.

 A shorthand padding property can be used to change all of the paddings at once. Also, the padding property can be used to set different values for each edge of the element. For this purpose, more than one value for the property is to be used.   

  • One padding value defines the same amount of padding for each edge.
Example

h1 { padding : 20px;}

In this, the padding will be 20 pixels for all the four sides.

 

When two padding values are specified, the first value specifies the padding of the top and bottom edges, the second specifies the padding of the left and right edges.

Example

p { padding : 10px 20 px;}

In this, the top and bottom padding will be 10 pixels, left and right padding will be 20 pixels.

 
  • When three padding values are specified , the first value defines the padding of the top edge, the second for left and right edges and the third value for the bottom edge.
Example

p { padding : 15 px 10% 10 px;}

In this, the top padding will be 15 pixels, left and right padding will be 10% of the width of the parent element, bottom  padding will be 10 pixels.

 
  • When four padding values are specified, the four padding values specify the padding on top, left, bottom and right respectively.
Example

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

In this, the top padding will be 10 pixels, right padding will be 5% of the parent element's width, bottom padding will be 15 pixels, and left margin will be 10% of the parent element's width.

 
  • CSS padding 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.

Padding-Bottom

This property sets the bottom padding of an element.

Example

p { padding-bottom: 15px;}

In this example, bottom padding is 15 pixels.

 
 

Padding-Top

This property sets the top padding of an element.                

Example

p { padding-top : 20%;}

In this example, top padding is 20% of the parent element's width.

 

Padding-Left

This property sets the left padding of an element.   

Example

p { padding-left : 20px;}

In this example, left padding is 20 pixels.

 
 

Padding-Right

This property sets the left padding of an element.

Example

p { padding-right : 20%;}

In this example, right padding is 20% of the parent element's width.

 
 
 
Summary
 

In this chapter you have learnt:

  • Setting space around an element using margin properties
  • Setting different margin-property values for different edges
  • Specifying interior gutter for an element
  • Explicitly defining CSS padding properties corresponding to each edge
 
Review Question
 

Fill in the Blanks

  1. Margin is a space in the _____ of the element, where as padding is the space in the _____ of the element.
  2. Possible values for margin properties are _____, _____ and _____.
  3. The default value for margin is _____.
  4. With two padding values, the first value specifies the padding of the _____ and _____ edges , the second specifies the padding of the _____ and ______ edges.
  5. Possible values for padding properties are______ and _____.
Solutions
  1. Outside, inside
  2. Length, percentage, auto
  3. Zero
  4. Top, bottom, left and right Zero

State whether True or False

CSS margin properties lets you define the space inside elements.

  1. Both margin and padding properties can have negative values.
  2. margin:15px, will set top margin of an element to 15 pixels.
  3. The percentage value of padding properties defines the padding in percentage with respect to the parent element's height.
Solutions
  1. False
  2. True
  3. False
  4. False
 
What's Next
The next chapter will acquaint you with the basic concepts of list-style. The chapter will further elucidate list-style- type, list-style-image and list-style position of the HTML list element.

              Hop over to the next chapter to get list-style options close-up.
 

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