display:inline-block

来源：互联网发布：淘宝买家采集编辑：程序博客网时间：2024/04/28 00:19

1、display:inline、block、inline-block的区别

inline：

所有的元素都在一行上
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变

block：

元素独占一行
宽度默认为100%，可以改变其值。
宽度、高度、行高、顶和低边距可以改变

2、display:inline-block的用法

通过使用display:inline-block属性和width，实现div的水平排列。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <style>        #container {            padding: 10px;            margin: 0px;            height: 200px;            width: 50%;            border: 1px dotted;        }        #container > div {            display: inline-block;            border: 1px dashed #ff0000;            margin: 10px auto;            width: 45%;            padding: 20px 0px;        }    </style></head><body>    <div id="container">        <div></div>        <div></div>        <div></div>        <div></div>        <div style="display:block"></div>    </div></body></html>

0 0