#CSS Sizing

#display

Inline elements cannot have their width and height set, whereas block elements can. In CSS, the display property determines the display type:

• block — defines a block-level element
• inline — defines an inline-level element

Example:

<p>Paragraphs are block elements by default</p>
<p>Paragraphs are block elements by default</p>
<p style="display:inline;">This is set as inline</p>
<p style="display:inline;">This is set as inline</p>

HTML

#width & height

You can set the width and height of elements using width and height. The most common unit is px (pixels).

Example:

<div style="width:200px; height:80px; background-color:#212121; color:cyan;">
    width:200px;
    <br/>
    height:80px;
</div>

CSS width and height

#max-width & max-height

You can limit an element's maximum width and height using max-width and max-height.

Example:

<div style="max-height:6em; background-color:#212121; color:cyan;">
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
</div>

CSS max width and max height

#overflow

In the example above, after setting a fixed size, some content overflows the element.

The overflow property controls what happens when content overflows its container. By default, overflow is set to visible.

Common values of overflow:

You can also use overflow-x and overflow-y to control horizontal and vertical overflow separately.

Example:

<div style="overflow:auto; max-height:6em; background-color:#212121; color:cyan;">
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
    Max height limit<br/>
</div>

CSS max width and max height

#Common CSS Units

Here are some of the most commonly used units in CSS: