heightの使い方

height

プロパティの説明

heightは、要素の高さを指定するプロパティです。ブロック要素に指定することができます。

height, padding, marginで指定できる領域は次のようになっています。

marginで指定できる領域

paddingで指定できる領域

↑ heightで指定できる高さ ↓
ここはブロック要素を表しています

paddingで指定できる領域

marginで指定できる領域

指定できる値

CSSで使える数値: 自分で指定します。
auto: 標準設定。状況に応じて変化します。

サンプル

サンプルページ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "https://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <title>サンプルページ</title>
 <style type="text/css">
 <!--
 .w1{height:40px; margin:100px; padding:10px; background:#cccccc;}
 -->
 </style>
</head>

<body>
 <h1>サンプルページ</h1>
 <p class="w1">height:40px, margin:100px, padding:10pxを指定。</p>
</body>

</html>