| |
| 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.
|
