Home » CSS

Height and Width in CSS

CSS | Height and Width properties: Here, we are going to learn about the height and width properties in CSS.
Submitted by Anjali Singh, on October 14, 2019

The height and width properties allow you to set the height and width properties of an element.

Height and width properties are crucial for any website because it helps in making the websites more space-efficient and further adds more to the styles of the site as well.

The height and width properties do not include any padding, margins or borders instead they influence the padding, margins, and borders of the element.

Syntax:

    Element{
        height: 200px/60%
        width: 200px/70%
    }

Example:

<!DOCTYPE html>
<title>heading</title>
<style>
    div {
        height: 200px;
        width: 60%;
        background-color: lightblue;
    }
</style>
<div>
    The div has height and weight property.
</div>

Output

The div has height and weight property.

height and width css 1

The height and width may have the following set of values:

  • auto - This is a default value. The browser itself calculates the height and width
  • length -It helps in defining the height/width in px, cm, etc
  • % - It helps in defining the height/width in percent of the containing block
  • initial - This sets the height/width to its default value
  • inherit - The height and width will be inherited from its parent value

Setting the max-width and max-height:

The max-width and max-height properties are used to set the maximum width and height of an element.

The properties can be specified into px, cm or percent.

Using max-width and max-height the browser with small windows can be handled more neatly.

Example:

<!DOCTYPE html>
<title>heading</title>
<style>
    div {
        max-height: 100px;
        max-width: 95px;
        background-color: green;
    }
</style>
<div>
    The div has 'max-height' and 'max-width' applied.
</div>

Output:

The div has 'max-height' and 'max-width' applied.

height and width css 2

Setting the min-width and min-height

It helps in constraining the width and height of an element to a minimum value.

Example:

<!DOCTYPE html>
<title>heading</title>
<style>
    div {
        min-height: 390px;
        min-width: 95px;
        background-color: red;
    }
</style>
<div>
    The div has 'min-height' and 'min-width' applied.
</div>

Output

The div has 'min-height' and 'min-width' applied.

height and width css 3

Some CSS dimension properties

Property Description
height Sets the height of an element
min-height Sets the minimum height of an element
max-height Sets the maximum height of an element
width Sets the width of an element
max-width Sets the maximum width of an element
min-width Sets the minimum width of an element





Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.