理解CSS：块级与内联盒子-优快云博客

本文链接：https://blog.youkuaiyun.com/fire_Oreo_999/article/details/105799007

本文详细介绍了CSS中的块级盒子和内联盒子的区别。块级盒子会在新的一行开始，支持宽高设置及外边距推挤其他元素；而内联盒子则不换行，宽度和高度无效，其外边距和内边距不会影响其他元素的位置。通过调整display属性，可以切换元素的显示类型。

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

CSS块级盒子和内联盒子

块级盒子（Block box）

块级盒子：

每个盒子都会换行。
宽（width）和高（height）属性可以发挥作用，未设置宽的情况下可以扩展并占据父容器的横向空间。
外边距（margin）、边框（border）和内边距（padding）会将其他元素从当前盒子周围推开。

HTML代码：

<DOCTYPE html>
    <html>
            <head> 
                       <title>块级盒子</title>            
                       <link rel="stylesheet" href="styles/块级盒子.css"> 
             </head>       
             <body>
                         <div class="div">
                         <p class="box">块级盒子</p>
          		</div>        
            </body>
     </html>

CSS代码：

.box::before{
    content: "块级盒子";
    display: block;    
    width: 100px;/*不设置宽则会占据父容器的横向空间*/
    height: 100px;    
    background-color: red;    
    border: 1px solid black;}
.div{    
    width: 200px;    
    height: 500px;    
    background-color: blue;}

内联盒子

内联盒子：

盒子不会产生换行。
宽（width）和高（height）属性不会起作用。
外边距（margin）、边框（border）和内边距（padding）会被应用但是不会推开其他元素。

HTML代码：

<!DOCTYPE html>
	<html>
	    <head>
	            <title>内联盒子</title>
	            <link rel="stylesheet" href="styles/内联盒子.css">    
	    </head>    
	    <body>
	            <p>瓦达西瓦瓦达西瓦瓦达西瓦瓦达西瓦瓦达西<span>span</span><span>span2</span> 
	            瓦达西瓦瓦达西瓦瓦达西瓦瓦达西瓦瓦达西瓦瓦达西瓦
	            瓦达西瓦瓦达西瓦瓦达西瓦瓦达西瓦瓦达西瓦瓦达西瓦瓦达西瓦</p>
	    </body>
	 </html>

CSS代码：

span{
    /*<span>、<a>、<em>、<strong>默认处于inline状态*/
    background-color: brown;    
    margin: 20px;    
    padding: 10px;    
    border: 2px dotted blue;    
    height: 100px;/*宽度和高度会被省略*/}

通过对盒子的display属性来设置盒子的外部显示类型：block（块级盒子）、inline（内联盒子）。