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

好多随笔都是栽过的坑,然而谁不是这么过来的呢O(∩_∩)O~~

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

其实之前也模模糊糊记得这个问题,但是内存不够,又没有仔细研究,所以忘了,以致于栽了。。

网上基本上说的都是“inline-block间距”,然而本菜鸡求严谨,更贴切地说,应该是inline和inline-block。

即使我已经用通配符清除内外边距了,默认情况还是会有边距存在,如上。

这是由于span之间的回车换行符引起的

解决方案:

1、

2、

3、

它们的共同点是,不要正常地换行(笑~)

回车换行符不要出现在两个标签之间,而是出现在标签内部

这里只是三个兼容性好而且简单无害的方法。更多方法点这里

大脑内存有限嘛,择优掌握。

当然,掌握越多好,而且有利于装逼

时间: 2024-10-10 21:23:19

行内元素之间间距的产生与去除的相关文章

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

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

块元素和行内元素之间的转换,overflow与visibility

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>块元素和行内元素之间的转换,overflow与visibility</title> <style> a{ width:100px; height:100px; border:1px solid #000000; background:red; di

清除行内元素之间HTML空白的几种解决方案

行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空白有时候显示在屏幕上那是相当的讨厌. 当然,有一些技巧(方法)可以用来清除他们:比如粗暴地完全删除空白,或者其他的方法: 解决方案1: font-size:0; 最好的方法是在外层元素上设置font-size:0;同时在内层元素上指定字体具体的大小. 复制代码 代码如下: ul.inline-block-lis

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

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

老旧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 的两个 div 之间会有间距,需要消除. <div class="container"> <div class="left">left</div> <div class="right">right</div> </div> .container { font-size: 0; /* 消除间距 */ } .left, .right { disp

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

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

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

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

Web前端技术:CSS部分深入---盒子模式,overflow属性,border属性,内外边距,水平居中问题,块\行内元素,浮动,层定位

1.盒子模式:页面中的所有元素都可以看成一个盒子,占据着一定的页面空间 2.overflow属性 hidden:超出部分不可见,默认值 scroll:显示滚动条 auto:如果有超出部分,显示滚动条 3.border属性 border-width:px \ thin \ medium \ thick border-style:dashed \ dotted \ solid \ double border-color:颜色 border:width  style color 案例 水平分割线: .