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 Dimensions
 
Previous

CSS Tutorial - Working with Dimensions

    Page 1 of 2
 
Overview
 

In this chapter you will learn:  

  • Various CSS dimension properties
  • How to set the dimensions around objects, like height and width
  • Concepts of line-height, max-height and min-height
  • How to set width of an element
  • Determining max-width and min-width for an element
 

The CSS dimension properties permits you to set various dimensions of the objects in and around HTML elements. These can be height, width and defining the space.

Various dimension properties are: height, line-height, max-height, min-height, width, min-width and max-width.

Height

The height property specifies the height of an element.

  • This property is useful for rendering images.
  • Possible values are: auto, length and percentage.
      auto - The height is determined by the browser.
      length - This defines the height in absolute units ( cm, mm, in, pt) or a relative units ( em, px).
      % - This defines the height in percentage of the height of the parent object.
  • By default, value for height is auto.
  • Negative lengths are not allowed.
Example
img {height : 200px ;}

Height of the image, here, is 200 pixels.

 

Line-Height

This property sets the distance between two adjacent lines. The distance is between the baselines of the adjacent lines.

  • This property can have the values: normal, number, length or %.
      normal - This sets the line height to the default or inherited value based on the font size of the element.
      number - This sets the line height of the current font-size to be multiplied by the number specified.
      length - This sets a fixed distance between the lines. The units used are: em, px, cm, pt.
      % - This sets the line height in % of the element's font size.
Example
p { line-height : 75 px;}

Typography is the science and art of arranging words on paper in ways that are both pleasing and maximally legible.
The field includes page layout, physical media selection, fonts used etc.
 

Max-Height

  • This property specifies the maximum height for an element.
  • Possible values for max-height property are: none, length, percentage.
      none - specifies that there are no height limits imposed on the element.
      length - specifies the maximum height for an element.
      % - specifies the maximum height of the element as a % of the height of the containing block.
Example
p { max-height:100px;}
 
  • This property is not currently supported by any browser.

Min-Height

This property specifies the minimum height for an element.

  • Possible values for min-height are : length, percentage.
      length - specifies the minimum height for an element.
      % - specifies the minimum height of the element as a % of the height of the containing block.
Example
p { min-height: 50px;}
 
  • This property is not currently supported by any browser.
                 

 

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