The role of content
The content of an element is the image, text, or other information that is being displayed. Changing the height property (height
) or width property width
) of the content box will result in changes to the way that the information in the box is displayed. The default value for both properties is auto
, which specifies that the browser calculates the size. Other options include specifying a measurement or a percentage of the block in which the element is contained, using the format presented in the earlier discussion on specifying sizes.
When to set dimensions
You need to be a bit careful about setting the height property for elements that contain text (such as the paragraph elementAn element consisting of text that forms a paragraph. and the heading elementsAn element that gives a heading.). Problems may occur if, for example, the user resizes the font.
InlineDisplay of an element on a line with other elements. elements will not accept height and width properties; shortly we will see other differences between block-levelDisplay of an element on a new line to take the whole horizontal space. and inline elements.
Browser defaults
Since browsers have default settings for various values, such as the sizes of margins for headings and paragraphs, you can't assume that leaving a value unspecified will result in the value being zero. You might choose to remove all defaults by including a rule that sets margins and padding to 0. When using the value zero, no type of unit needs to be specified.
Specifying sizes
As discussed earlier, you can choose among different ways to specify sizes. Giving sizes using em
or rem
relates dimensions to the font size of the parent element or html element, respectively.
Using percentages for sizing is tricky, as the value will be the specified percentage of the width of the containing element (not its height, even if you are specifying the dimension for the height), and this only works if you've remembered to specify the width of the containing element. The containing element could be the body of the page, which could be as wide as the browser window.
If you really want to use percentages, the best approach is to ensure that you are able to control the width of the containing element. This can be achieved by putting the element you wish to size into a division elementAn element used to group elements on different lines. so that the division element becomes its containing element. You can then provide a size for the division element and a percentage for the element you wish to size.
Sizing by content
Keep in mind that the dimensions given for the height property and the width property refer to content, not the entire size of the box.
Glimpse of the future
After discussing padding and margins, we will consider an alternative to sizing with respect to the content.