CSS Height And Width
Published: 2021-07-31 14:22:58

---
title: CSS Height And Width
published: true
date: 2021-04-20 01:16:04 UTC
tags: 
canonical_url: https://www.devwares.com/blog/css-height-and-width
series: Devwares Web development Free Course
---

 **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:**

```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](https://www.devwares.com/static/dd48b4e92a8ffc5dfbee77914588e3b8/6146e/cssImage1.png)

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 full 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 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:**

```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;
}

```

###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](https://cdbootstrap-demo.netlify.app).

![Contrast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuz057uo4vkmvma7bdom.png)

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](https://www.devwares.com/product/bootstrap-contrast-pro).

## Resources 
- [Contrast Design Bootstrap](https://www.devwares.com/docs/contrast/javascript/index/)
- [Accordion](https://www.devwares.com/docs/contrast/javascript/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/javascript/components/alert/)
- [Animation](https://www.devwares.com/docs/contrast/javascript/components/animations/)
- [Autocomplete](https://www.devwares.com/docs/contrast/javascript/components/autocomplete/)
- [Badges](https://www.devwares.com/docs/contrast/javascript/components/badge/)
- [Box](https://www.devwares.com/docs/contrast/javascript/components/box/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/javascript/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/javascript/components/buttonGroup/)
- [Button](https://www.devwares.com/docs/contrast/javascript/components/buttons/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/javascript/components/buttonToolbar/)
- [Card](https://www.devwares.com/docs/contrast/javascript/components/card/)
- [Carousel](https://www.devwares.com/docs/contrast/javascript/components/carousel/)
- [Checkbox](https://www.devwares.com/docs/contrast/javascript/components/checkbox/)
- [Collapse](https://www.devwares.com/docs/contrast/javascript/components/collapse/)
- [DataTable](https://www.devwares.com/docs/contrast/javascript/components/datatables/)
- [DatePicker](https://www.devwares.com/docs/contrast/javascript/components/datepicker/)
- [DropDown](https://www.devwares.com/docs/contrast/javascript/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/javascript/components/footer/)
- [Forms](https://www.devwares.com/docs/contrast/javascript/components/forms/)
- [Icon](https://www.devwares.com/docs/contrast/javascript/components/icon/)
- [Iframe](https://www.devwares.com/docs/contrast/javascript/components/iframe/)
- [Input](https://www.devwares.com/docs/contrast/javascript/components/input/)
- [InputGroup](https://www.devwares.com/docs/contrast/javascript/components/inputgroup/)
- [ListGroup](https://www.devwares.com/docs/contrast/javascript/components/listgroup/)
- [Mask](https://www.devwares.com/docs/contrast/javascript/components/mask/)
- [Modal](https://www.devwares.com/docs/contrast/javascript/components/modal/)
- [Multiselect](https://www.devwares.com/docs/contrast/javascript/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/javascript/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/javascript/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/javascript/components/panels/)
- [Pop Over](https://www.devwares.com/docs/contrast/javascript/components/popover/)
- [Progress](https://www.devwares.com/docs/contrast/javascript/components/progress/)
- [Radio](https://www.devwares.com/docs/contrast/javascript/components/radio/)
- [Rating](https://www.devwares.com/docs/contrast/javascript/components/rating/)
- [Select](https://www.devwares.com/docs/contrast/javascript/components/select/)
- [Select 2](https://www.devwares.com/docs/contrast/javascript/components/select2/)
- [Slider](https://www.devwares.com/docs/contrast/javascript/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/javascript/components/spinner/)
- [Stepper](https://www.devwares.com/docs/contrast/javascript/components/stepper/)
- [Switch](https://www.devwares.com/docs/contrast/javascript/components/switch/)
- [Table](https://www.devwares.com/docs/contrast/javascript/components/table/)
- [Forms](https://www.devwares.com/docs/contrast/javascript/forms/)
- [Navbar](https://www.devwares.com/docs/contrast/javascript/navigation/navbar/)
- [Pagination](https://www.devwares.com/docs/contrast/javascript/navigation/pagination/)
- [Tab](https://www.devwares.com/docs/contrast/javascript/navigation/tabs/)
- [Sidebar](https://www.devwares.com/docs/contrast/javascript/navigation/sidebar/)
- [Time Picker](https://www.devwares.com/docs/contrast/javascript/sections/timepicker/)
- [Data Table](https://www.devwares.com/docs/contrast/javascript/table/datatables/)
- [Fixed Data Table](https://www.devwares.com/docs/contrast/javascript/table/fixed_datatables/)
- [Table](https://www.devwares.com/docs/contrast/javascript/table/table/)
- [Widgets](https://www.devwares.com/docs/contrast/javascript/widgets/)