首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS 消除 inline-block 元素间的间隙

关于什么是 inline-block 元素间的间隙,我们先来看个简单的例子#left { background-color: coral; display: inline-block; width...,添加 display: inline-block; 属性后,水平呈现的元素间产生了空隙,出现这一现象的本质是,HTML 中存在的空白符 (whitespace) ,空白符包括空格,TAB 和回车,解决的办法有...,在这个例子当中,我们在父级添加该属性即可达到消去间隙的作用#main { letter-spacing: -8px;}根据运行结果,我们发现,子项继承父级属性之后,文本内容都堆叠在了一起,所以我们还要在子项中添加...: 0;}类似的属性还有 word-spacing,该属性是用来定义元素中字之间插入多少空白符,在父级直接添加该属性即可完成我们想要的效果,子项不需要添加其他属性#main { word-spacing...{ font-size: 16px;}使用 Flex 弹性盒关于 Flex 弹性盒,在该篇博文 CSS 布局_2 Flex弹性盒 中有着详细的介绍,在这里只是提供一个解决方法#main { display

1.5K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS的display 属性

    CSS的display 属性规定元素应该生成的框的类型。 1.1、none:此元素不会被显示。 1.2、block:此元素将显示为块级元素,此元素前后会带有换行符。 1.3、inline:默认。...(CSS2.1 新增的值) 1.5、list-item:此元素会作为列表显示。 1.6、run-in:此元素会根据上下文作为块级元素或内联元素显示。...1.7、compact:CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。...1.8、marker:CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 1.9、table:此元素会作为块级表格来显示(类似 ),表格前后带有换行符。...此元素会作为一个表格单元格显示(类似 和 ) 2.8、table-caption:此元素会作为一个表格标题显示(类似 ) 2.9、inherit:规定应该从父元素继承 display 属性的值

    1.1K30

    小结CSS的float属性

    前端林子 本文将从以下三个方面介绍CSS的float属性: 什么是float 浮动引发的问题 几种清除浮动的方法 1.什么是float 应用了float属性的元素,就像在印刷布局中,形成文字环绕图片的效果...除此之外,浮动还可以用于创建网页布局 1.1文本环绕图片 通过给图片设置float属性,形成文字环绕图片的效果,是float属性的常见应用场景之一: 效果: ? 附上实现代码:          float:文字环绕效果     css...实现原理: 侧边栏、中间内容区域的元素设置向左浮动(float:left;),最下面的footer元素设置为清除左右两边的浮动(clear:both;) 2.float的属性值 float有四个可用的属性值...元素不浮动,并会显示在其在文本中出现的位置。 inherit: 规定应该从父元素继承 float 属性的值。

    1.2K50

    回顾css的animation属性

    异名新接一个需求,实现一个文字的切换,结果发现太久没写css动画,对animation属性已经很陌生,尤其是对steps()函数的理解已经丢掉了。...animation 属性概览 animation相关的属性比较多,异名看到自己前几年学习这个属性的时候做的导图,发现这确实是一种很棒的归纳方式,不应该丢掉,就趁着周末的时间review了一下,在以前的基础上做了一些修正...animation-delay 理解和应用steps函数 设计师同学认为上面的文字渐变切换的表现很怪异,有种拖泥带水的感觉,设计师要求文字切换的时候”硬切“。...framesAnim 实现路径动画 svg的部分属性也是能够做动画变化的,比如下面实现的这个logo的描边就是很棒的一个效果 ?...但是异名这次的体验就很不一样,异名想起了当初写的博客,翻一下网盘甚至还发现了当初梳理的脑图,我能快速捡起当初对这个知识点的认知,快速定位到我要去使用哪些属性,以前写过的那些特效还重新唤起我css动画的兴奋

    97210

    小结CSS的float属性

    本文将从以下三个方面介绍CSS的float属性: 什么是float 浮动引发的问题 几种清除浮动的方法 1.什么是float 应用了float属性的元素,就像在印刷布局中,形成文字环绕图片的效果。...除此之外,浮动还可以用于创建网页布局 1.1文本环绕图片 通过给图片设置float属性,形成文字环绕图片的效果,是float属性的常见应用场景之一: 效果: 文字环绕图片.png 附上实现代码: float:文字环绕效果 css...),最下面的footer元素设置为清除左右两边的浮动(clear:both;) 2.float的属性值 float有四个可用的属性值: left:元素向左浮动 right:元素向右浮动 none:默认值...元素不浮动,并会显示在其在文本中出现的位置。 inherit: 规定应该从父元素继承 float 属性的值。

    5.1K1403

    css display属性的值及用法_css clear作用

    display的所有属性 {/* CSS 1 */ display: none; display: inline; display: block; display: list-item; /*...,并配合一些相关的例子 基本属性 display: none none 是 CSS 1 就提出来的属性,将元素设置为none的时候既不会占据空间,也无法显示,相当于该元素不存在。...display: inline inline也是 CSS 1 提出的属性,它主要用来设置行内元素属性,设置了该属性之后设置高度、宽度都无效,同时text-align属性设置也无效,但是设置了line-height...·在box外面 display: inline-block inline-block为 CSS 2.1 新增的属性。...CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如,display:table的CSS声明能够让一个HTML元素和它的子节点像table元素一样。

    2.5K10
    领券