インラインブロック要素(inline-block)は、インライン要素とブロック要素の両方の特徴を持っています
それでは、要素をインラインブロック要素として設定する方法
display:inline-block;
注(css2.1の新機能) )、<img><input> タグはそのようなインライン ブロック タグです。
インラインブロック要素の特徴
1. 他の要素と同じ行にあります。
2. 要素の高さ、幅、行の高さ、上下の余白を設定できます。
a タグの幅、高さ、背景色などを設定する例を以下に書いてみましょう。 a タグはデフォルトではインライン要素であり、幅と高さは影響しません
コードは次のとおりです。 :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
display:inline-block; /*内联块状元素*/
width:300px;
height:200px;
background-color:green;
color:red;
}
</style>
</head>
<body>
<a href="#">欢迎大家来到php中文网</a>
</body>
</html>上記のコードでは、aタグをAfter inline block要素に変換すると、幅と高さを設定できます
次のセクション