HTML+CSS インラインブロック要素で簡単に始められる

インラインブロック要素(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要素に変換すると、幅と高さを設定できます

学び続ける

新しいファイル

<!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>

提出するリセットコード

自動運転