ADVERTISEMENT

Width and Height in CSS

Telegram Group Join Now

ADVERTISEMENT

Width and Height in CSS

CSS Width and Height | Height Width and css explanation - codewithrandom

 

ADVERTISEMENT

ADVERTISEMENT

The width and height CSS properties set the width/height of an element. By default, these properties define the width/height of the content area/box.

Valid Values:

ADVERTISEMENT

  • <length>
  • <percentage>
  • auto: calculates and selects a width/height for the element
  • max-content: the intrinsic preferred width
  • min-content: the intrinsic minimum width
  • available: containing block width minus horizontal margin, border and padding
  • fit-content: the larger of: the intrinsic minimum width; the smaller of the intrinsic preferred width and the available width

Note: The width and height attributes only set the area inside the padding, border and margin of the element and does not include them.

ADVERTISEMENT

50+ HTML, CSS & JavaScript Projects With Source Code

Example:

Here is an example of the width CSS property:

ADVERTISEMENT

#element1 {
width: 200px;
}
#element2 {
width: 5em;
}
#element3 {
width: 75%;
}
#element4 {
width: auto;
}

Example:

Here is an example of the height CSS property:

#element1 {
height: 200px;
}
#element2 {
height: 5em;
}
#element3 {
height: 75%;
}
#element4 {
height: auto;
}

Minimum and Maximum Widths and Heights

ADVERTISEMENT

The following properties define CSS minimum and maximum widths and heights.

ADVERTISEMENT

  • min-width: sets the minimum width of an element
  • max-width: sets the maximum width of an element
  • min-height: sets the minimum height of an element
  • max-height: sets the maximum height of an element

Create Login and SignUp Page In HTML & CSS

Valid Values:

  • <length>
  • <percentage>

Here is an example of the min-width CSS property.

h1 {
min-width: 500px;
background: lightblue;
}

Here is an example of the max-width CSS property.

p {
max-width: 250px;
background: lightgreen;
}

Here is an example of the min-height CSS property.

ADVERTISEMENT

h1 {
min-height: 500px;
background: lightblue;
}

Here is an example of the max-height CSS property.

ADVERTISEMENT

h3 {
max-height: 70px;
background: lightgreen;
/* let's hide the overlapping content */
overflow: hidden;
}

 

ADVERTISEMENT

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

ADVERTISEMENT

Thanks For Reading!

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT