display:inline-block

werqwerqwerewrqwr

于 2014-08-21 13:30:25 发布

阅读量457

点赞数

CC 4.0 BY-SA版权

分类专栏： Html学习笔记

本文链接：https://blog.youkuaiyun.com/stuwangjianglin/article/details/38728579

Html学习笔记专栏收录该内容

2 篇文章

订阅专栏

本文详细解释了 CSS 中 display 属性的 inline、block 和 inline-block 三种值的区别，并通过示例代码展示了如何使用 display: inline-block 实现 div 元素的水平排列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>