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