行内块与块元素

17 Mar 2025 | 阅读 2 分钟

本文将讨论内联块（inline-block）和块级元素（block elements）之间的区别。这些元素在网页设计中被广泛使用。人们通常会对这些元素感到困惑。因此，让我们来理解这些区别，以避免混淆。

块级元素

以新行开始的元素称为块级元素。块级元素会占据内容的全部宽度。与内联元素不同，块级元素存在顶部和底部边距。块级元素只能出现在 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）的 `display` 属性值的工作方式与内联（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

这是使用页面上所有元素的输出文件

上面网页的代码

<!DOCTYPE html>
<html>
<head>
<style>
span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid white;  
  background-color: blue; 
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid white;    
  background-color: green; 
}

span.c {
  display: block;
  width: 70px;
  height: 50px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: pink; 
}
</style>
</head>
<body>

<h1>The display Property</h1>


<h2>display: block</h2>

<div>This is section with a block span made pink <span class="c">block</span> <span class="c">element</span> . </div>


<h2>display: inline-block</h2>
<div> This is section with a inline block span made green<span class="b">inline</span> <span class="b">block</span>  </div>

</body>
</html>

下一主题区别

行内块与块元素

块级元素

内联块元素

块级元素和内联块元素的区别

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

L-差异

Z-差异

Y-差异

X-差异

W-差异

V-差异

U-差异

T-差异

S-差异

R-差异

Q-差异

P-差异

O-差异

N-差异

M-差异

差异

K-差异

J-差异

I-差异

H-差异

G-差异

F-差异

E-差异

D-差异

C-差异

B-差异

A-差异

杂项-差异

最新更新-差异

行内块与块元素

块级元素

内联块元素

块级元素和内联块元素的区别

相关帖子

不完全显性与共显性

先天性免疫与适应性免疫的区别

内向型与外向型

隔行扫描与逐行扫描的区别

吸气与呼气

独立日与国庆日

就地保护与迁地保护

绝缘体与导体

ICSE 与 CBSE

ICU 与 CCU

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器