display:inline-block解决文字有间隙问题
定义:display:inline-block是使元素以块级元素的形式呈现在行内。意思就是说,让这个元素显示在同一行不换行,但是又可以控制高度和宽度,这相当于内联元素的增强。
但是display:inline-block存在文字间隙问题
- <div class="container">
- <div class="left">
- 左
- </div>
- <div class="right">
- 右
- </div>
- </div>
- .container{
- width:800px;
- height:200px;
- }
- .left
- {
- background:red;
- dispaly:inline-block;
- width:200px;
- height:200px;
- }
- .right
- {
- background:red;
- dispaly:inline-block;
- width:600px;
- height:200px;
- }
解决办法:
父元素font-size=0 ,再向两个子元素分别设置font-size
- .container{
- width:800px;
- height:200px;
- font-size:0;
- }
- .left{
- font-size:14px;
- background:red;
- display: inline-block;
- width:200px;
- height:200px;
- }
- .right{
- font-size:14px;
- background:blue;
- display: inline-block;
- width:600px;
- height:200px;
- }
转载于:https://www.cnblogs.com/wangyawei/p/8889650.html
display:inline-block解决文字有间隙问题相关推荐
- [CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
- display:inline、block、inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- 关于css的display:flex inline block inline-block和float
1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素):使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行, ...
- display的block、none、inline属性及解释
常会用到display对应值有block.none.inline这三个值 参数: block :块对象的默认值.用该值为对象之后添加新行.之前也添加一行. none :隐藏对象.与visibility ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别以及该死的ie6兼容问题
2019独角兽企业重金招聘Python工程师标准>>> display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- CSS中display:block、inline、inline-block
display:block的特点: 1.block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. 2.block元素可以设置width,heig ...
- display:inline display:block
display:inline; 元素会被显示为内联元素,元素前后没有换行符. display:block 元素将显示为块级元素,此元素前后会带有换行符. 举例: 1.display:block < ...
- CSS 中 display 的 block,inline,inline-block 这三个属性的区别
基本概念 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元 ...
最新文章
- 万能android调用webservice方法——参数类型不受限制
- Python OpenCV——函数 cv2.findContours 运行错误【in function ‘cv::pointSetBoundingRect‘】解决方案
- KVO 和 KVC 的区别?
- Java递归例子——求x的y幂次方
- configure、pkg-config、pkg_config_path三者的关系
- error in static/js/xxx.js from UglifyJs Unpected token: punc() [static/js/xxx.js]
- C#反射取得方法、属性、变量
- css动画效果轮播图片
- java学生基本信息管理_Java课程设计 - 学生基本信息管理
- vue实现跑马灯抽奖
- git 报错:remote: Not Found fatal: repository ‘http://xxx/xxx.git/‘ not found
- MMKV-Android中的存储框架
- 武汉科技大学计算机生命与科学周海,湖北双胞胎周海周洋:为了母亲,一个放弃清华,一人放弃中科院...
- SN_Write_tool 使用说明文档
- 商务网站建设与维护【14】
- 2022茶艺师(中级)试题及答案
- css实现提示信息,纯CSS 实现tooltip 内容提示信息效果
- autotools工具使用
- 量子计算机幕后故事,惊心动魄! 你不知道的北斗卫星发射幕后故事
- 苹果笔记本快捷键集合
热门文章
- 3.集--LinkedTransferQueue得知
- 获取组件的方式(方法)
- Hadoop上路_11-HDFS流程演示
- 数据库连接池工作原理
- superset可视化-deck.gl 3D Hexagon与deck.gl Grid与deck.gl Screen Grid
- 模拟滤波器的单位冲激响应+单位阶跃响应+斜坡响应+抛物线响应matlab实现(转载+整理)
- spark on yarn提交任务后总是accepted以及通过yarn关闭application
- SecureCRT退格键需要出现^H
- hexo博客完整备份
- 计算机专业都学什么科,大学本科计算机专业都有什么科目?