📜  CSS 中的 display: inline 和 display: inline-block 有什么区别?

📅  最后修改于: 2021-11-03 04:09:20             🧑  作者: Mango

CSS 中的 display 属性是非常有用且常用的属性,它包含许多值。本文包含display:inlinedisplay:inline-block属性。

“display: inline” 属性:该属性用于将元素显示为内联元素(如 )。高度和宽度属性不影响 display:inline;财产。它只允许左边距和右边距,而不是顶部和底部。简而言之,它的相邻元素前后没有换行符,并且允许在其旁边放置 HTML。

句法:

element {
    display: inline;
    // CSS property
}

示例 1:



    
        display:inline; property
        
    
    
        

GeeksforGeeks

        

display: inline; property

        
Prepare for the Recruitment drive of product based         companies like Microsoft, Amazon,          Adobe etc with a free online placement preparation         course. The course focuses on various MCQ's & Coding question          likely to be asked in the interviews & make your upcoming          placement season efficient and successful.         
                         

输出:
排队

“display: inline-block” 属性:该属性用于将元素显示为行内级块容器。元素本身被格式化为内联元素,但它可以应用高度和宽度值。它作为内联元素放置(与相邻内容在同一行)。它看起来像一个内联元素,但它表现为一个块元素并且不强制换行。

句法:

element {
    display: inline-block;
    // CSS property
}

示例 2:



    
        display:inline-block; property
        
    
    
        

GeeksforGeeks

        

display: inline-block; property

        
Prepare for the Recruitment drive of product based         companies like Microsoft, Amazon,          Adobe etc with a free online placement preparation         course. The course focuses on various MCQ's & Coding question          likely to be asked in the interviews & make your upcoming          placement season efficient and successful.         
                         

输出:
内联块