New Contrast Pro UI Kit and template with 5 admin dashboards, 23 pages and 10000+ components for $49 ($50 off)🎉
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:

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:

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:

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:

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:

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:

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:

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

Create Stunning websites and web apps

Building different custom components in react for your web apps or websites can get very stressful. Thats why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro.Try contrast pro

ad-banner

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc project with a clean, well documented, well crafted template and UI components.Learn more about Contrast Pro

Share Post:

Comments

...