消除行内元素的间距

设置了 inline-block 的两个 div 之间会有间距,需要消除。

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
.container {
    font-size: 0;    /* 消除间距 */
}
.left, .right {
    display: inline-block;
}
.right {
    width: calc(100% - 100px);   /* 计算宽度,运算符号左右一定要有空格 */
}

原文地址:https://www.cnblogs.com/jiktiv123/p/10407042.html

时间: 2024-10-28 16:15:41

消除行内元素的间距的相关文章

行内元素之间间距的产生与去除

好多随笔都是栽过的坑,然而谁不是这么过来的呢O(∩_∩)O~~ ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 其实之前也模模糊糊记得这个问题,但是内存不够,又没有仔细研究,所以

老旧Webkit浏览器行内元素0间距问题

有时我们希望display:inline-block的元素之间的天衣无缝.紧密相依,比如说如下的情情形: 一般情况下我们使用如下代码可以实现: .pageNav { font-size: 0; text-align: center; } .pageNav a { display: inline-block; font-size: 14px; color: #666; border: 1px solid #ccc; } 但是在版本过老的webkit内核浏览器中,你看到的结果可能是:那可恶的间距依然

【转】行内元素和inline-block产生的水平空隙bug

重构工程师们在设计代码时,有喜欢手动删除行内元素之间产生的额外空隙,并通过设置margin或padding来获取想要间距吗?如代码: <div class=“”><span class=“bgr”>去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span><span class="b

1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小/行高 字体样式 字体大小和样式不可省略 2 行内块的间距问题 行内块元素相邻时,行内块元素之间会有几像素的间距,只有通过浮动解决. 3 行内元素的margin 行内元素的上下外边距不起作用,左右起作用. 4 清除浮动 给父盒子设置一个高度     Clear: both      Overflow

行内元素之间产生水平间隙的原因及解决方案

1. 行内元素之间产生水平空隙的原因:代码中有意或无意的添加了换行符,tab(制表符)或者空格等字符引起的: 2. 解决方案: 删除引起问题的换行符,制表符或者空格等,但是缺点是会使代码结构混乱: 设置margin属性为负数,如:margin-left: -3px;缺点是负数的值不确定,得具体情况具体分析,不推荐: 在行内元素之间添加HTML注释注释符号:<!----> 1 <div> 2 <span>行内元素</span><!-- 3 -->&

HTML行内元素 块级元素及语义化

---------------------------------------可以换行的元素         不能换行的元素-------------------------------- 块级元素                                                                          行内元素 div - dl - form ---交互表单 a - 链接  br - 换行  em - 强调   h1 - h6 标题  hr - 水平分隔

7.27 行内元素和块状元素 * 精灵图

# CSS回顾### CSS的使用* 元素的style属性内* style标签内* link引入外部的css文件 `<link rel="stylesheet" href="">`* @import url("");  写在css中 ### CSS的基本语法        选择器{        属性:属性值;    } ### CSS注释`/*注释*/` ### CSS的长度单位* px* em  * 百分比* 绝对单位  cm 

空格导致行内元素水平间隔问题

在测试块级元素与行内元素区别时,发现本该没有间隔在一行的行内元素中间出现水平间隔. 1 <span>行内元素</span> 2 <span>行内元素</span> 3 <span>行内元素</span> 4 <span>行内元素</span> 效果如下图: 导致这种问题出现的原因在于html中span便签之间的空格.如果去掉空格那么就不会有间隔. <span>行内元素</span><

行内元素之间的有个小空隙的问题

一.简述 编写HTML页面时,有时候在某一种情况下中用到了行内元素后面要紧跟着一个行内元素,比如:<span></span><a></a>  那么就会出现span元素与a元素之间有一个小空隙. 二.内容 首先是span元素与a元素之间出现了小空隙的情况. <span>span</span> <a href='javascript:void(0)'>第一个a标签</a> </div> 然后是消除小空隙