Width and Height

Every element comes with its pre-defined width and height. It might happen that the default value of the width and height is 0 pixel, but the browser will render each element with size.

Contingent upon how an element is shown, the default width and height might be sufficient.

On the off chance that an element is vital to the design of a page, it might require precise width and height property estimations.

Width

The display value of an element determines its default width. Block-level elements come with a default width value as 100 percent i.e., covering the entire available horizontal space.

Inline-Block and Inline elements extend and contract horizontally to fit up their content.

The Inline-level elements can't have a fixed size; thus, the height and the width properties are only applicable to non-inline elements. If you want to give a non-inline element a fixed width,

then utilize the width property.

Example –

div {

width: 400px;

}

Height

The content present in the element determines its default height. The element will contract and expand as per the amount of content present in the element. If you want to give a non-inline element a fixed height, then utilize the height property.

div {

height: 100px;

}

Learn HTML and CSS in 10 Days

Building Your First Web Page

Getting to Know HTML

Getting to Know CSS

CSS Properties

Opening the Box Model

Positioning Content

Working with Typography

Setting Background And Gradients

Creating Lists

Adding Media

Building Forms

Organizing Data With Tables

Writing Your Best Code

Some more HTML and HTML 5 tags

Width and Height

Popular Exams

Company

Resources