Scribd
Upload
31 views

5.CSS Height, Width

The CSS height and width properties set the height and width of an element, excluding padding, borders, and margins. The max-width property sets the maximum width of an element. All HTML elements can be considered boxes and the CSS box model includes margins, borders, padding, and content.

Uploaded by

Manoj Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
31 views

5.CSS Height, Width

The CSS height and width properties set the height and width of an element, excluding padding, borders, and margins. The max-width property sets the maximum width of an element. All HTML elements can be considered boxes and the CSS box model includes margins, borders, padding, and content.

Uploaded by

Manoj Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

CSS 

Height, Width and Max-width

The 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.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 50px;
  width: 100%;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS height and width properties</h2>

<div>This div element has a height of 50 pixels and a width of 100%.</div>

</body>
</html>

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

Note: Remember that 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.

Tip: Drag the browser window to smaller than 500px wide, to see the
difference between the two divs!

This element has a height of 100 pixels and a max-width of 500 pixels.

Note: If you for some reason use both the width property and the max-
width property on the same element, and the value of the width property is
larger than the max-width property; the max-width property will be used (and
the width property will be ignored).

Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}
div.o {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}
div.p{
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

<div>This div element has a height of 200px and a width of 50%.</div><br>


<div class="o">This div element has a height of 100px and a width of
500px.</div><br>
<div class="p">This div element has a height of 100px and a max-width of
500px.<p>Resize the browser window to see the effect.</p></div>
</body>
</html>

CSS Box Model
All HTML elements can be considered as boxes.

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.
The image below illustrates the box model:

Explanation of the different parts:


 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is
transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

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

Example
Demonstration of the box model:

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML
element. It consists of: borders, padding, margins, and the actual
content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px
margin and a 15px green border. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>

Width and Height of an Element


In order to set the width and height of an element correctly in all browsers,
you need to know how the box model works.

Important: 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.

Example
This <div> element will have a total width of 350px: 

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>

<h2>Calculate the total width:</h2>

<img src="/Users/Manoj/Classes/Web Devep/CSS/Images/ex3.jpg" width="350"


height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also
350px.</div>

</body>
</html>

Here is the calculation:


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

You might also like