CSS Tutorial - CSS Size

You can control the element size by using the size-related properties described below.

width
height
Set the width and height for the element.
Value: auto or length or %
min-width
min-height
Set the minimum acceptable width or height for the element.
Value: auto or length or %
max-width
max-height
Set the maximum acceptable width or height for the element.
Value: auto length %
box-sizing
Sets which part of an element's box is used for sizing.
Value: content-box or padding-box or border-box or margin-box

The default value for all these properties is auto and the browser will figure out the width and height of the element.

You can specify sizes explicitly using lengths or percentages. The percentage values are calculated from the width of the containing block even when dealing with height.

Example

The following code shows how you can set the size of an element.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div {<!--from   w ww. j a  va2  s. com-->
  width: 75%;
  height: 100px;
  border: thin solid black;
}

img {
  background: lightgray;
  border: 4px solid black;
  margin: 2px;
  height: 50%;
}

#first {
  box-sizing: border-box;
  width: 50%;
}

#second {
  box-sizing: content-box;
}
</style>
</head>
<body>
  <div>
    <img id="first" src="http://www.java2s.com/style/download.png" alt="small  banana">
    <img id="second" src="http://www.java2s.com/style/download.png" alt="small  banana">
  </div>
</body>
</html>

Click to view the demo

There are three elements in the body. A div element contains two img elements. The div element,whose width set to 75%, is a child of the body element.

The div element will have 75% of the width of the containing block, which is the body content box.

If the browser window is resized, then the body element will be resized and the div element will also be resized to preserve the 75% relationship.

The height of the div element is 100px. It is an absolute value and won't change as the containing block is resized.

The width of the img element is 50% of the containing block.

Example 2

The following code shows how to set width and height to auto.

<html>
<head>
<style type='text/css'>
p {<!--from   ww w .j ava  2  s.c  om-->
  padding: 10px;
  margin: 10px;
  border: thin solid black;
  width: auto;
  min-width: 200px;
}
img#x-aspect-1 {
    border: 1px solid black;
    margin: 5px;
    
    width: 200px;
    height: auto;
}


</style>
</head>
<body>
  <p>This is a test. This is a test.</p>
  <img src='http://www.java2s.com/style/download.png' id='x-aspect-1' />
</body>
</html>

Click to view the demo

Sized Box

The box-sizing property changes the element's box that the size properties apply to.

By default, the height and width are calculated and applied for the element's content box. For example, if an element's height property is set to 100px, the real height onscreen will be 100 pixels, plus the top and bottom padding, border, and margin values.

Its value could be one of the following:

content-box
padding-box
border-box
margin-box

The following code shows how you can set the size of an element.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div {<!--   w  w  w  . j av a 2 s.c o  m-->
  width: 75%;
  height: 100px;
  border: thin solid black;
}

img {
  background: lightgray;
  border: 4px solid black;
  margin: 2px;
  height: 50%;
}

#first {
  box-sizing: border-box;
  width: 50%;
}

#second {
  box-sizing: content-box;
}
</style>
</head>
<body>
  <div>
    <img id="first" src="http://www.java2s.com/style/download.png" alt="small  banana">
    <img id="second" src="http://www.java2s.com/style/download.png" alt="small  banana">
  </div>
</body>
</html>

Click to view the demo

Minimum and Maximum Sizes

You can use the min- and max- properties to set limits to size the element.

The following code sets min and max Ranges for Size.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
img {<!--from  www .  j  ava 2  s  .  co m-->
  background: lightgray;
  border: 4px solid black;
  margin: 2px;
  box-sizing: border-box;
  min-width: 100px;
  width: 50%;
  max-width: 200px;
}
</style>
</head>
<body>
  <img src="http://www.java2s.com/style/download.png" alt="small  banana">

</body>
</html>

Click to view the demo

Related Properties

Property	Description	CSS
height	Set the height of an element	1
max-height	Set the max height	2
max-width	Set the max width	2
min-height	Set the min height	2
min-width	Set the min width	2
width	Set the width of an element	1