#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
Paragraphs are block elements by default
Paragraphs are block elements by default
This is set as inline
This is set as inline

#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

    width:200px;
    

    height:80px;

#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

    Max height limit

    Max height limit

    Max height limit

    Max height limit

    Max height limit

    Max height limit

    Max height limit

    Max height limit

    Max height limit

    Max height limit

    Max height limit

    Max height limit

#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:

Value	Description
`visible`	Overflowing content is visible
`hidden`	Overflowing content is hidden
`scroll`	Scrollbars are always shown
`auto`	Scrollbars appear only when needed

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

    Max height limit

    Max height limit

    Max height limit

    Max height limit

    Max height limit

    Max height limit

    Max height limit

    Max height limit

    Max height limit

    Max height limit

    Max height limit

    Max height limit

#Common CSS Units

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

Unit	Description	Example
`px`	Pixels	`100px`
`em`	Relative to the font-size of the element	`1em`
`rem`	Relative to the root element’s font-size	`1rem`
`%`	Percentage of the parent element's content box	`100%`
`vw`	1% of the viewport’s width	`100vw`
`vh`	1% of the viewport’s height	`100vh`
`vmin`	1% of the smaller of viewport width/height	`100vmin`
`vmax`	1% of the larger of viewport width/height	`100vmax`