内联块与块元素的区别

在本文中，我们将讨论内联块元素和块元素的区别。这些元素在设计网站时被广泛使用。人们通常会混淆这些元素。因此，让我们了解差异以避免此类混淆。

块元素

从新行开始的被称为块元素。块元素占据内容的整个宽度。与内联不同，这些元素存在顶部和底部边距。块级元素只能出现在 body 标签内。块级元素比内联元素创建更大的结构。

块元素示例：

<div>
<p>
<li>
<main>
<nav>
<ul>
<form>
<video>
<table>
<aside>
<article>

示例代码：

<!DOCTYPE html>  
<html>  
<head>  
<title>Page Title</title>  
<style>  
p { background-color: #8A55; }  

</style>  
</head>  
<body>  
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>  

</body>  
</html>

上面代码输出结果如下 -

内联块元素

inline-block 的显示值的工作方式与 inline 类似，但有一个例外：元素的高度和宽度可以修改。

例子：

<!DOCTYPE html>  
<html>  
<head>  
<style>  
span.b {  
  display: inline-block;  
  width: 100px;  
  height: 100px;  
  padding: 5px;  
  color:white;  
  border: 1px solid blue;      
  background-color: blue;   
}  
</style>  
</head>  
<body>  

<div>This is an example of inline-block element with a span colored as blue <span class="b">Inline-Block</span>  </div>  

</body>  
</html>

上面代码输出结果如下 -

块和内联块的区别 -

块元素	内联块
块元素从新行开始。	它与元素周围的所有文本保持内联，并且与内联显示相同。
示例：div、p、li、main 等。	它没有标签示例，因为它可以应用于任何使用 CSS 的标签。
CSS 属性：display:block	CSS 属性：display:inline-block

欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果。
转载请注明：文章转载自有区别网 [http://www.vsdiffer.com]
本文标题：内联块与块元素的区别
本文链接：https://www.vsdiffer.com/vs/inline-block-vs-block-elements.html
免责声明：以上内容仅是站长个人看法、理解、学习笔记、总结和研究收藏。不保证其正确性，因使用而带来的风险与本站无关！如本网站内容冒犯了您的权益，请联系站长，邮箱：，我们核实并会尽快处理。

内联块与块元素的区别

块元素

内联块元素

随机