Dimensions in CSS: To specify the height and width of an element you can use height and width properties. It does not specify the borders, margins, and padding, it just sets the height and width inside the border, margins, and padding for an HTML element.

CSS Width Property

The width property sets the width of an element.

The width of an element does not include padding, borders, or margins!

The min-width and max-width properties override the width property.

Example

Set the width of three <div>elements:

div.a {
    width:auto;
    border: 1px solid black;
}

div.b {
      width:150px;
      border: 1px solid black;
}

div.c {
     width:50px;
     border: 1px solid black;
}

CSS height Property

The height property sets the height of an element.

The height of an element does not include padding, borders, or margins!

If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.

If height is set to a numeric value (like pixels, (r) em, percentages) then if the content does not fit within the specified

height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.

Example

Set the height of two <div> elements.

div.a {
   height: auto;
   border: 1px solid black;
}

div.b {
     height: 50px;
     border: 1px solid black;
}

CSS min-height Property

The min-height property defines the minimum height of an element.

If the content is smaller than the minimum height, the minimum height will be applied.

If the content is larger than the minimum height, the min-height property has no effect.

Example

Set the minimum height of a <p> element to 200 pixels:

p.ex1 {
   min-height: 200px;
}

CSS max-height Property

The max-height property defines the maximum height of an element.

If the content is larger than the maximum height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.

If the content is smaller than the maximum height, the max-height property has no effect.

Example

Set the maximum height of a <p> elements to 50 pixels:

p.ex1 {
   max-height: 50px;
}

CSS min-width Property

The min-width property defines the minimum width of an element.

If the content is smaller than the minimum width, the minimum width will be applied.

If the content is larger than the minimum width, the min-width property has no effect.

This prevents the value of the width property from becoming smaller than min-width.

Example

Set the minimum width of a <span> element to 500 pixels:

span.ex1 {
    min-width: 500px;
}

CSS max-width Property

The max-width property defines the maximum width of an element.

If the content is larger than the maximum width, it will automatically change the height of the element.

If the content is smaller than the maximum width, the max-width property has no effect.

Example

Set the maximum width of a <p> element to 150 pixels:

p.ex1 {
   max-width: 150px;
}

CSS vertical-align Property

The vertical-align property sets the vertical alignment of an element.

Example

Vertical align an image:

img.a {
    vertical-align: baseline;
}
 
img.b {
    vertical-align: text-top;
}

img.c {
    vertical-align: text-bottom;
}

img.d {
    vertical-align: sub;
}

img.e {  
    vertical-align: super;
}