inline-block是什么?

inline-block 的元素(如input、img)既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align(因为这个垂直对齐属性只对设置了inline-block的元素有效) 属性。
HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,空白符自然占据一定的宽度,使用inline-block 会产生元素间的空隙。(这句话下面会用例子解释)

详细应用

在了解inline-block之前,导航栏一直采用float浮动来达到横向排列的目的,然而浮动是会产生副作用的,需要清除浮动,相对变得麻烦了。使用inline-block将会变得很方便:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100%;
background: yellow;
height: 100px;
text-align: center;
line-height: 100px;
}
a{
color:#fff;
text-decoration: none;
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
background: red;
}
</style>
</head>
<body>
<div>
<a href="">我是a1</a>
<a href="">我是a2</a>
<a href="">我是a3</a>
<a href="">我是a4</a>
</div>
</body>
</html>

行内样式

有没有发现,每个a之间都会有一个空隙,这个空隙是因为块级元素会换行,就有换行,HTML 中的换行符、空格符、制表符等合并为空白符.所以换行符会占据宽度,产生间隙.

推荐阅读

  1. 行内元素和块级元素的具体区别是什么?
  2. Google Search Console移动设备易用性报错修复【已解决】
  3. 熊掌号中天级收录和周级收录的区别?
  4. 如何在没有插件的情况下为WordPress中的外部链接添加nofollow
  5. 在wordpress通过代码实现百度主动推送|手工提交|实时推送
  6. wordpress熊掌号站点天级收录链接提交代码【不用插件实现】
  7. 百度官方推出一款WordPress链接提交插件【baidu links submit】
  8. 什么是别名域(Aliasdomain)?

发表评论

电子邮件地址不会被公开。 必填项已用*标注