Boxes in CSS: Width, height and outline

To finish this section about boxes in CSS, we need to talk about their height, width and outlines.

The CSS language includes the following instructions to deal with these options:


With height, you specify the exact height an element will have on the web page; and with min-height and max-height, their minimum and maximum heights, respectively. Likewise, with width, you specify the exact width an element must have on the web page; and with min-width and max-width, their minimum and maximum widths, respectively. Lastly, although outline doesn't show anything when browsing from Internet Explorer browser, with outline-color, outline-style and outline-width, or their short cut, outline, you specify the look of a specific element, just like when you use the border CSS instruction for boxes.

You should know two more things: The first one is that these instructions don't accept percentages as units. The second one is that you can specify two of these CSS instructions for the same element, but only using different units.


If you want a paragraph to be at least 50 pixels tall, you write:

min-height: 50px;

If you want a paragraph to be at most 120 pixels tall, you write:

max-height: 120px;

If you need an element to have certain height, but you are afraid that people will miss something if they change their font size, use two CSS instructions:

min-height: 80px;
height: 2.4em;

It works the same way with width.

Outline, describes a line near an element, but doesn't work in Internet Explorer.

outline: blue ridge 2px;

will set a 2-pixel-wide blue ridge outline around the element on which you specify the instruction.

Knowledge + Computers