block,line-block,inline大小

最新推荐文章于 2023-01-09 16:56:26 发布

mrli834668690

最新推荐文章于 2023-01-09 16:56:26 发布

阅读量616

点赞数

分类专栏： css

css 专栏收录该内容

1 篇文章

订阅专栏

本文通过实例对比了HTML中三种元素显示方式：inline、block及inline-block的区别。inline对象不受高度和宽度属性影响，不会独占一行；block对象可以设置宽高，并且会独占一行；inline-block则兼具block的宽高特性和inline的同行特性。

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

我们用firbug浏览别人网站时会发现设计者会在很多地方使用inline-block。我们都知道inline是声明div是内联对象，block是声明块对象，那么inline-block是什么意思，即内联又成块？接下来做个测试，让我们了解一下三者的区别和作用吧：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>inline、block、inline-block的区别</title>
<style>
.a{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;}
.b{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;}
.c{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;}
</style>
</head>
<body>
<span class="a">
inline
</span>inline
<span class="b">
block
</span>block
<span class="c">
inline-block
</span>inline-block
</body>
</html>

、

 
 <
 html 
  xmlns
 =
 "http://www.w3.org/1999/xhtml"
 >

 
 <
 head
 >

 
 <
 meta 
  http-equiv
 =
 "Content-Type" 
  content
 =
 "text/html; charset=utf-8" 
  />

 
 <
 title
 >inline、block、inline-block的区别</
 title
 >

 
 <
 style
 >

 
 .a{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;}

 
 .b{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;}

 
 .c{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;}

 
 </
 style
 >

 
 </
 head
 >

 
 <
 body
 >

 
 <
 span 
  class
 =
 "a"
 >

 
 inline

 
 </
 span
 >inline

 
 <
 span 
  class
 =
 "b"
 >

 
 block

 
 </
 span
 >block

 
 <
 span 
  class
 =
 "c"
 >

 
 inline-block

 
 </
 span
 >inline-block

 
 </
 body
 >

 
 </
 html
 >

我们发现内联对象inline给它设置height和width是没有用的，致使它变宽变大的原因是内部元素的宽高+padding。观察inline对象的前后元素我们会发现Inline不单独占一行，其它元素会紧跟其后。

块对象block是可以设置宽高的，但是它的实际宽高是本身宽高+padding。观察block的前后元素我们会发现block要单独占一行。

当看到这里的时候我们就会想，如果我们即需要div有宽高，又不希望它独占一行怎么办？

这个时候我们就需要使用inline-block了，再观察一下上图，我们会发现inline-block即具有block的宽高特性又具有inline的同行元素特性。