display:inline-block，block，inline的區別與用法

時間 2019-11-08

標籤 display inline block 區別用法欄目 CSS 简体版

原文原文鏈接

1、首先要了解什麼是塊級元素與行級元素css

塊級元素html

會佔領頁面的一行，其後多個block元素自動換行、能夠設置width，height，設置了width後一樣也佔領一行、一樣也能夠設置 margin與padding屬性。瀏覽器

ps:常見的塊級元素:div,img,ul,form,p等spa

行級元素code

與其餘元素在同一行上，高度，行高以及底邊距不可改變，高度就是內容文字或者圖片的寬度，不能夠改變。orm

ps：em，strong，br,input等htm

display:inline-block，block，inline元素的區別blog

一、display：block將元素顯示爲塊級元素，從而能夠更好地操控元素的寬高，以及內外邊距，每個塊級元素都是重新的一行開始。圖片

二、display : inline將元素顯示爲行內元素，高度，行高以及底邊距不可改變，高度就是內容文字或者圖片的寬度，不能夠改變。多個相鄰的行內元素排在同一行裏，知道頁面一行排列不下，纔會換新的一行。input

三、display：inline-block看上去值名inline-block是一個混合產物，實際上確是如此，將元素顯示爲行內塊狀元素，設置該屬性後，其餘的行內塊級元素會排列在同一行。好比咱們li元素一個inline-block，使其既有block的寬度高度特性，又有inline的同行特性，在同一行內有不一樣高度內容的元素時，一般要設置對齊方式如vertical-align: top;來使元素頂部對齊。

例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>display:inline-block</title>
    <style type="text/css">
        li{
            width:200px;
            text-align: center;
            list-style: none;
            display: inline-block;
            background-color: #eee;
        }
    </style>
</head>
<body>
 <ul>
     <li><a href="#">inline-block</a></li>
     <li><a href="#">inline-block</a></li>
     <li><a href="#">inline-block</a></li>
     <li><a href="#">inline-block</a></li>
     <li><a href="#">inline-block</a></li>
 </ul>
</body>
</html>

display:inline-block，block，inline示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #inline p{
            display: inline;
            background-color:red ;
            width:300px;/*這裏設置無用*/
        }
        #inline-block p{
            display: inline-block;
            background-color:red ;
            width:100px;
            padding:10px;
        }
        #block p{
            display: block;
            background-color: red;
            width:100px;
            padding:20px;
        }
        div{
            margin:20px;
            background-color: #eee;
        }
    </style>
</head>
<body>
     <div id="inline">
        display:inline 在同一行，而且寬度就等於文字內容的寬度且設置寬度無用<p>內容內容內容內容內容內容內容</p>內容內容內容內容內容內容
     </div>
     <div id="inline-block">
        display:inline-block  既有行級元素的特性，也有塊級元素的特性，所以在同一行，能設置寬高，margin，padding<p>內容內容內容內容內容內容內容</p>內容內容內容內容內容內容
     </div>
     <div id="block">
        display:block 塊級元素會自動換新行，佔領一行,能夠設置寬高，margin，padding <p>內容內容內容內容內容內容內容</p>內容內容內容內容內容內容
     </div>
</body>
</html>