There are multiple ways to affect an element’s size. You have seen how other formatting can change an element’s size—in the absence of explicit sizing instructions the user agent does its best to make everything fit. However, if you want to intervene and explicitly size an element, you can. The following sections show you how.
Specifying exact sizes
You can use the width and height properties to set the size of the element. For example, if you want a particular section of the document to be exactly 200 pixels wide, you can enclose the section in the following <div> tag:
Likewise, if you want a particular element to be a certain height, you can specify the height using the height property.
Note:Keep in mind that you can set size constraints-—minimum and maximum sizes-—as well as explicit sizes. See the next section for details on minimum and maximum sizes.
Specifying maximum and minimum sizes
There are properties to set maximum and minimum sizes for elements as well as explicit sizes. At times, you will want the user agent to be free to size elements by using the formatting surrounding the element, but still want to constrain the size, allowing an element to be displayed in its entirety instead of being clipped or displayed in a sea of white space.
You can use the following properties to constrain an element’s size:
Each property takes a length or percentage value to limit the element’s size. For example, to limit the element from shrinking to less than 200 pixels in height, you could use the following:
min-height: 200px;Controlling element overflow
Whenever an element is sized independently of its content, there is a risk of it becoming too small for its content. For example, consider the paragraphs are the same except that the second paragraph has had its containing box specified too small, and the contents fall outside of the border. In this example the user agent (Opera) chose to display the rest of the element outside its bounding box. Other user agents may crop the element or refuse to display it at all.
If you want to control how the user agent handles mismatched elements and content sizes, use the overflow property. This property has the following format:
An element that is mis-sized doesn’t always handle its content properly.
The values have the following effect:
The clipped portion will not be visible, and the user will have no way to access it.
The overflow property set to scroll instructs the user agent to supply a mechanism to view the entire content (usually scrollbars).
|
|
HTML Related Tutorials |
|
---|---|
XML Tutorial | HTML 4 Tutorial |
HTML 5 Tutorial | Java Tutorial |
CSS Tutorial | XHTML Tutorial |
HTML Related Interview Questions |
|
---|---|
XML Interview Questions | HTML 4 Interview Questions |
HTML Interview Questions | HTML 5 Interview Questions |
HTML+XHTML Interview Questions | HTML+Javascript Interview Questions |
HTML DOM Interview Questions | Java Interview Questions |
CSS Interview Questions | Java Abstraction Interview Questions |
Dynamic HTML Interview Questions | XHTML Interview Questions |
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.