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