CSS中 inline、block、inline-block的區別

時間 2019-11-07

標籤 css inline block 區別欄目 CSS 简体版

原文原文鏈接

咱們用firbug瀏覽別人網站時會發現設計者會在不少地方使用inline-block。咱們都知道inline是聲明div是內聯對象，block是聲明塊對象，那麼inline-block是什麼意思，即內聯又成塊？接下來作個測試，讓咱們瞭解一下三者的區別和做用吧： html

<htmlxmlns=" http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>inline、block、inline-block的區別</title>

<style>

.a{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;}

.b{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;}

.c{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;}

</style>

</head>

<body>

<spanclass="a">

inline

</span>inline

<spanclass="b">

block

</span>block

<spanclass="c">

inline-block

</span>inline-block

</body>

</html>

咱們發現內聯對象inline給它設置height和width是沒有用的，導致它變寬變大的緣由是內部元素的寬高+padding。觀察inline對象的先後元素咱們會發現Inline不單獨佔一行，其它元素會緊跟其後。測試

塊對象block是能夠設置寬高的，可是它的實際寬高是自己寬高+padding。觀察block的先後元素咱們會發現block要單獨佔一行。網站

當看到這裏的時候咱們就會想，若是咱們即須要div有寬高，又不但願它獨佔一行怎麼辦？ ui

這個時候咱們就須要使用inline-block了，再觀察一下上圖，咱們會發現inline-block即具備block的寬高特性又具備inline的同行元素特性。 spa

最後提醒一下，IE6/7下padding對inline的寬高是對其沒影響的。看下圖：設計

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。