從CSS盒子模型中，我們可以看出，元素的寬度width和高度height是針對內容區而言的，大家要非常清楚這一點。很多初學者容易把補白也認為是內容區的一部分。
語法：
width：像素值;
height：像素值
說明：
只有塊元素能設置width和height，行內元素無法設置width和height。
在CSS入門教程中，全部都是使用像素作單位，在CSS進階階段我們會深入講解其他CSS單位。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>寬度width和高度height</title>
<style type="text/css">
#main div
{
width:100px;
height:30px;
border:1px solid red;
}
#main span
{
width:100px;
height:30px;
border:1px solid blue;
}
</style>
</head>
<body>
<div id="main">
<div></div>
<span></span>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
“#main div{}”這個選擇器表示選中id為#main的元素下面的子元素div，這是一個子元素選擇器；而“#main span{}”這個選擇器表示選中id為#main的元素下面的子元素span，這也是一個子元素選擇器，忘記了的同學，記得回去翻翻“CSS選擇器”喔。
div元素是塊元素，span是行內元素。因此div元素可以設置寬度width和高度height，而span元素無法設置寬度width和高度height。
舉例2：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>寬度width和高度height</title>
<style type="text/css">
#main
{
border:1px dashed gray;
padding:15px;
display:inline-block;
margin-top:100px;
margin-left:100px;
}
.div1
{
width:100px;
height:40px;
border:1px solid silver;
}
.div2
{
width:100px;
height:80px;
border:1px solid silver;
}
</style>
</head>
<body>
<div id="main">
<div class="div1"> 學習網</div>
<hr />
<div class="div2"> 學習網</div>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
由於div元素是塊元素，因此可以設置width和height這兩個屬性。
舉例3：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>寬度width和高度height</title>
<style type="text/css">
#main
{
border:1px dashed gray;
padding:15px;
display:inline-block;
margin-top:100px;
margin-left:100px;
}
.span1
{
width:100px;
height:40px;
border:1px solid silver;
}
.span2
{
width:200px;
height:80px;
border:1px solid silver;
}
</style>
</head>
<body>
<div id="main">
<span class="span1"> 學習網</span >
<hr />
<span class="span2"> 學習網</span >
</div>;
</body>
</html>
在浏覽器預覽效果如下：
分析：
由於span元素是行內元素，因此span元素無法設置width和height這兩個屬性（設置了變無效）。
如果我們想為span元素（行內元素）也設置高度和寬度，那怎麼辦呢？在CSS中，可以使用display屬性來將行內元素轉換為塊元素，或者將塊元素轉換為行內元素。在“CSS進階教程”，我們會詳細講解這個極其重要的屬性。