| |
Width
This property allows you to set the width of an element.
- This property is useful for rendering images.
-
Possible values are: auto, length and percentage.
auto - This lets the width to be determined by the browser automatically.
length - This defines the width in absolute units (cm, mm, in, pt) or relative units ( em, px).
% - This defines the width in percentage of the width of the parent object.
- By default, value for width is auto.
- Negative lengths are not allowed.
| Example |
| img { width: 50px;}
 Width of the image, here, is 50 pixels.
|
| |
Max-Width
This property specifies the maximum width for an element.
Possible values for max-width property are: none, length, percentage.
none - This specifies that there are no width limits imposed on the element.
length - This specifies the maximum width for an element.
% - This specifies the maximum width of the element as a % of the width of the containing block.
| Example |
| h1 { max-width:100px;} |
| |
This property is not currently supported by any browser.
Min-Width
This property specifies the minimum width for an element.
Possible values for min-width property are: length, percentage.
length- This specifies the minimum width for an element.
% - This specifies the minimum width of the element as a % of the width of the containing block.
| Example |
| h2 { min-width: 50px;} |
| |
This property is not currently supported by any browser.
| |
| |
| Summary |
| |
In this chapter you have learnt:
- The various dimension properties
- Setting height and width for an object
- Specifying line-height, max-height and min-height for an element
- Applying width dimension on images and determining their max-width or min-width
|
| |
| |
| Review Questions |
| |
Fill in the Blanks
- The auto value of height property is determined by the ______.
- The default height value is ______.
- Line-height sets the distance between two _____ lines.
- Possible values for max-height property are ______, _____ and _____.
- Width property sets the _____ of an element.
Solutions
- Browser
- Auto
- Adjacent
- None, length and percentage
- Width
State Whether True or False
- Negative values are allowed for height property.
- By default, value for height is none.
- Min-height property specifies the minimum height for an element.
- p { line-height : 15 px}, will set the distance between two lines of paragraph as 15 pixels.
Solutions
- False
- False
- True
- True
| Exercise |
| Define various dimension properties around HTML elements. |
| Solution |
|
| |
|
| |
| What's Next |
The next chapter will acquaint you with how to control the display and position of the elements. The chapter will further tell you about the positioning of text, clearing the text, changing the shape of the cursor, and visibility of a text.
Hop over to the next chapter to get a close-up on controlling the display and position.
|
| |
| |
|
