Width and Height of HTML Element for CSS
CSS Rendering for HTML – Part 2
Foreword: In this part of the series, I talk about the width and height of an element box.
By: Chrysanthus Date Published: 25 Dec 2015
Introduction
Units
The width or height can be measured in px, em or %. The pixel is the smallest dot on the screen. 1em is equal to the size of the font in use (in the box). The % width is relative to the width of the containing block (element). The % height is relative to the height of the containing block, in many cases.
You should know the units, vw and vh. 1vh is 1% the width of the initial containing block (viewport). 1vh is 1% the height of the initial containing block (viewport).
Hey, these units (vw and vh) are good for responsive design – see later.
The width Property
The width property can be used to set or give the box a new width. Width is the width of the content box, not the padding box, not the border box and not the margin box. Try the following code:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<p style="width:300px; border:solid 2px black">
some text<br>some text
</p>
</body>
</html>
You can decide on the minimum width and/or maximum width for a block-level box (element). If the resolution of the screen is small, the browser chooses a small width not less than the minimum width. If the resolution of the screen is big, the browser chooses a width not greater than the maximum. For these you have the min-width and max-width properties. The value can be in px, em or %. % is relative to the containing block. So you can have code like,
div { min-width: 200px; max-width:350px}
The height Property
When designing a web page, give your element(s) a width value. Avoid giving height value; the browser will always give a good corresponding height. If for any reason you want to give the element a height, then you can use the height property. Remember that the height is the height of the content box. Try the following code:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<p style="height:100px; width:300px; border:solid 100px black">
some text<br>some text
</p>
</body>
</html>
I hope from the display, you appreciate the fact that the width and height are for the content box.
You also have a min-height and a max-height property.
You have seen that the dimension can be length or in percentage. The value for the width and height can also be auto or inherit.
auto means that the user agent (browser) chooses the value based on some considerations.
Assume that you have a span element followed by an em element and a strong element in a paragraph. These three elements have the same parent (paragraph). When a value is inherit, it means the child element has the corresponding value of the parent.
Line Height
Imagine a line of images and text. The height of the tallest image is the height of the line (images are inline elements). You have the line-height and the vertical-line property for the lines in a containing box. Each line is a line box.
The line-height Property
This property gives the minimum height for a line in a container box. Different lines in the box can have different heights, but there is a minimum height that each can have. So you can have code like:
div { line-height: 1.2em}
The value of the property can be a number in px, em or %. % is relative to the font size. The value can also be the reserved word, normal, which means the browser determines the value (height). This is the initial (default) value.
The vertical-align Property
An inline element in the form of a block, can have a number of lines in it. You can use the vertical align property to decide how the lines would be arranged in the element. There are a good number of possible values for the property. The values (reserved words) and their meanings are given below (test the properties to see their different effects). Common values to use are, top, middle and bottom.
baseline
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
sub
Lower the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.)
super
Raise the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.)
text-top
Align the top of the box with the top of the parent's content area.
text-bottom
Align the bottom of the box with the bottom of the parent's content area.
<percentage>
Raise (positive value) or lower (negative value) the box by this distance (a percentage of the 'line-height' value). The value '0%' means the same as 'baseline'.
<length>
Raise (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline'.
The following values align the element relative to the line box. Since the element may have children aligned relative to it (which in turn may have descendants aligned relative to them), these values use the bounds of the aligned subtree. The aligned subtree of an inline element contains that element and the aligned subtrees of all children inline elements whose computed 'vertical-align' value is not 'top' or 'bottom'. The top of the aligned subtree is the highest of the tops of the boxes in the subtree, and the bottom is analogous.
top
Align the top of the aligned subtree with the top of the line box.
bottom
Align the bottom of the aligned subtree with the bottom of the line box.
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Basics of HTML 5Basics of ECMAScript
HTML DOM Basics
CSS Basics
CSS Rendering for HTML
Simple Guide to Website Design
CSS Multi-column Layout Module
Media and CSS
Responsive Web Design
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course
BACK NEXT