DEV Community

Devwares profile image Sampson Ovuoba
Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

CSS Height And Width

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.

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:

div {
  height:200px;
  width:50%;
  background-color:light blue;
}
Enter fullscreen mode Exit fullscreen mode

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:

div {
  max-Width:500px;
  height:100px;
  background-color:light blue;
}
Enter fullscreen mode Exit fullscreen mode

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:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
Enter fullscreen mode Exit fullscreen mode

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 full size of an element, you must also add padding, borders and margins.

CSS Code:

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

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:

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;}
Enter fullscreen mode Exit fullscreen mode

None of the other outline properties (which you will learn more about in 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:


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;
}
Enter fullscreen mode Exit fullscreen mode

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:

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;
}
Enter fullscreen mode Exit fullscreen mode

Create Stunning Websites and Web Apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.

Contrast

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc. project with a clean, prebuilt and well documented template and UI components. Learn more about contrast.

Resources

Top comments (0)

Read next

skolaczk profile image

Next.js starter template

Michał Skolak -

bymarsel profile image

Unraveling Macrotasks and Microtasks in JavaScript: What Every Developer Should Know

Marsel Akhmetshin -

fanatixan profile image

AI Tools and Refactoring

Attila Fejér -

michaeljolley profile image

What is the Record Type in C# and Should I use it?

Michael Jolley -