postImage

CSS Height And Width

blogImage

By Emmanuel Chinonso

Web Developer

CSS Height and Width

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

Contrast Bootstrap UI Kit

CSS Setting height and width: The height and width properties are used to set the height and width of an element. The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

CSS height and width Values: The height and width properties may have the following values: auto - This is default. The browser calculates the height and width

  • Length - Defines the height/width in px, cm etc.

  • % - Defines the height/width in percent of the containing block

  • Initial - Sets the height/width to its default value

  • Inherit - The height/width will be inherited from its parent value.

CSS Code:

css
div {
height:200px;
width:50%;
background-color:light blue;
}

The height and width properties do not include padding, borders, or margins. They set the height/width of the area inside the padding, border, and margin of the element.

Setting max-width The max-width property is used to set the maximum width of an element. The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width). The problem with the <div> above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page. Using max-width instead, in this situation, will improve the browser's handling of small windows. The value of the max-width property overrides width.

CSS Code:

css
div {
max-Width:500px;
height:100px;
background-color:light blue;
}

The CSS Box Model

In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. All HTML elements are considered boxes.

CSS Box Model

The box model allows us to add a border around elements, and to define space between elements.

CSS Code:

css
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}

Width and Height of an Element

When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the total size of an element, you must also add padding, borders and margins.

CSS Code:

css
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

Calculation of the height and width of an element

  • 320px (width) +

  • 20px (left + right padding) +

  • 10px (left + right border) +

  • 0px (left + right margin)

  • = 350px

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin The total height of an element should be calculated like this: Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin.

CSS Outline

This is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".

The outline properties of CSS are

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.

CSS Code:

css
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

None of the other outline properties (which you will learn more about) will have ANY effect unless the outline-style property is set.

CSS Outline Width: The outline-width property specifies the width of the outline, and can have one of the following values:

  • thin (typically 1px)
  • medium (typically 3px)
  • thick (typically 5px)
  • A specific size (in px, pt, cm, em, etc).

CSS Code:

css
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
p.ex2 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
}
p.ex3 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
}
p.ex4 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
}

CSS Outline Color

The outline-color property is used to set the color of the outline. The color can be set by:

  • Name - specify a color name, like "red"

  • HEX - specify a hex value, like "#ff0000"

  • RGB - specify a RGB value, like "rgb(255,0,0)"

  • HSL - specify a HSL value, like "hsl(0, 100%, 50%)"

  • Invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)

CSS Code:

css
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: red;
}
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: blue;
}
p.ex3 {
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}

Contrast Bootstrap UI Kit

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner

Related Posts

Comments

...