CSS Introduction | CSS Box Model | Size (height/width)

CSS Dimensions

With CSS, you can freely set the size of HTML elements. The properties available for adjusting size in CSS are as follows.

height and width Properties

The height and width properties set the height and width of an HTML element. The default value for these properties is auto, so the web browser automatically sets the height and width for each HTML element.

<style>
    div { height: 200px; width: 500px; }
</style>

max-width Property

The max-width property sets the maximum width that the HTML element can have. The default value is none, which means there is no limit on the width of the HTML element.

If you set the width with the width property, a scroll bar is created when the browser becomes smaller than the configured width. If you set the width with the max-width property, you can get a more flexible result. When max-width is used, the width of the HTML element automatically shrinks along with the decreasing width of the web browser.

<style>
    div.maxWidth { max-width: 500px; }
</style>

min-width Property

The min-width property sets the minimum width that the HTML element can have. The default value is 0, which means there is no limit on the width of the HTML element.

If an element with min-width set does not have a separate width value, its initial width is 100%. When the browser size decreases, the width of the HTML element also decreases automatically. However, if the browser becomes smaller than the width set by min-width, the HTML element stops shrinking and creates a horizontal scroll bar.

<style>
    div.minWidth { min-width: 500px; }
</style>

max-height Property

The max-height property sets the maximum height that the HTML element can have. The default value is none, and the height is automatically set according to the size of the HTML element.

When a maximum height is set with max-height, the height of the HTML element is limited to that configured height or less. If the element’s height is greater than the configured maximum height, a vertical scroll bar is created.

<style>
    p { max-height: 50px; overflow: auto; }
</style>

min-height Property

The min-height property sets the minimum height that the specified HTML element can have. The default value is 0, which means there is no limit on the height of the HTML element.

When min-height is set, the height of the HTML element is limited so it does not go below the configured height. In other words, the height value cannot become lower than the min-height value. This min-height value is applied before max-height and height.

<style>
    p { min-height: 100px; }
</style>