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  標籤轉換成內嵌塊狀元素之後,是可以設定寬高

繼續學習
||
<!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>