How to set the height of an HTML element using a pixel value with CSS
The code below shows you how to set the height of an HTML element using a pixel value with CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Web Development Tutorials.com</title>
<style type="text/css">
div.one
{
height: 20px;
border: 1px solid #000;
}
div.two
{
height: 50px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="one">
one
</div>
<br />
<div class="two">
two
</div>
</body>
</html>
The code above creates the examples below.
one
two
Use the text editor below to practice what you have learned.
When there is more content within an HTML element than the height allows, the excess content overflows. The example below is an example of what happens when there is more content than the height allows.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Web Development Tutorials.com</title>
<style type="text/css">
div.three
{
height: 20px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="three">
There is more content in this HTML element than the height allows, causing the content to overflow.
There is more content in this HTML element than the height allows, causing the content to overflow.
There is more content in this HTML element than the height allows, causing the content to overflow.
</div>
<br />
</body>
</html>
The code above creates the example below.
There is more content in this HTML element than the height allows, causing the content to overflow. There is more content in this HTML element than the height allows, causing the content to overflow. There is more content in this HTML element than the height allows, causing the content to overflow.