美文网首页
inline-block特性

inline-block特性

作者: 饥人谷_易燃 | 来源:发表于2018-04-13 02:02 被阅读0次

特征

  • 既呈现 inline 特性(不占据一整行,宽度由内容宽度决定)
  • 又呈现 block 特性 (可设置宽高,内外边距)
  • 默认情况下,inline-block元素之间就有空隙出现

缝隙问题

代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>display: inline-block</title>
  <style>
    .space a {
    display: inline-block;
    font-size: 50px;
    background-color: red;
}
  </style> 
</head>

<body>
  <div class="space">
    <a href="#">哈哈</a>
    <a href="#">呵呵</a>
  </div>
</body>
</html>

页面显示为:

inline-block0001.png

可以清楚的看到右侧页面展示哈哈和呵呵两个字之间产生了空隙,缝隙的实质就是元素标签段之间的空格

如何消除缝隙

1.去掉HTML中的空格

inline-block0002.png

2.使用font-size:0;

inline-block0004.png

inline-block元素如何对齐

vertical-align: top ;
以顶端对齐

vertical-align: bottom;
以底部对齐。

相关文章

  • css样式2

    inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐? inli...

  • inline-block

    inline-block 既呈现 inline 特性(不占据一整行,宽度由内容宽度决定)又呈现 block 特性 ...

  • inline-block特性

    特征 既呈现 inline 特性(不占据一整行,宽度由内容宽度决定) 又呈现 block 特性 (可设置宽高,内外...

  • 浮动

    块级元素设置浮动宽度会收缩,类似inline-block。行内元素设置浮动拥有块级元素的特性。

  • display:inline-block

    inline-block 的元素既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换...

  • 老司机Studio 第三章

    CSS3的进阶特性 verticle-align垂直对齐方式只对容器内的inline-block元素起作用:图片,...

  • Web9.CSS常见样式2

    背景 隐藏or透明 inline-block 既呈现inline特性(不占据一整行,宽度由内容宽度决定)又呈现bl...

  • 元素设置inline-block添加文案后的元素塌陷问题(ver

    在了解可以通过设置display:inline-block会将块级元素拥有inline元素一行排列的特性,那么我...

  • 浮动

    浮动特性: 1.脱离标准文档流2.相互贴靠3.字体围绕4.自动变成 inline-block元素 清除浮动方法: ...

  • css常见样式

    动手测试并列出4条以上的特性区别 1.行内元素和inline-block元素水平方向上默认情况下是按基线对齐。2....

网友评论

      本文标题:inline-block特性

      本文链接:https://www.haomeiwen.com/subject/ovyqkftx.html