如何去除内联元素(inline-block元素)之间的间距(转载)

如何去除内联元素(inline-block元素)之间的间距

前几天写一个专题页

div{width:900px;}
div a{ display:inline-block; width:300px;}
<div>
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
</div>

发现这个900的容器居然容不下3个300的a,纠结了一下,偷偷把里面的a变小了一点点。但是后来被同事发现了,说这个是因为inline元素和inline-block默认都会有间距。可以把它浮动起来,间距就会消失的。float:left;之后间距果然消失了。

下面总结了几条去除inline元素和inline-block元素去除间距的方法:

1、可以在html中直接把元素写在一行上或把闭合标签和第二个开始标签写在一行或两行间添加注释或直接去掉闭合标签但最后一个不能去掉。

2、设置margin-right为负值,但要考虑上下文的字体和文字大小。

3、先设定子元素字体,再设置父元素font-size:0px;////chrome中:-webkit-text-size-adjust:none;

4、设置父元素letter-spacing或word-spacing为负值,要考虑字体,子元素有文字也要注意设置letter-spacing或word-spacing的值。

5.float:left;

时间: 2024-08-03 13:20:47

如何去除内联元素(inline-block元素)之间的间距(转载)的相关文章

当inline元素包裹block元素时会发生什么

经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a> 点击图片自动跳转,不用增加新的点击事件,光标滑过时变成小手等等,这都是a标签的功劳. 但是inline元素包裹block元素后,inline元素本身是否会变成blcok元素,还有待求证,于是做了如下对比: <div>这里是块元素</div> <span>用于测试(没有

内联函数 inline

(一)inline函数(摘自C++ Primer的第三版) 在函数声明或定义中函数返回类型前加上关键字inline即把min()指定为内联. inline int min(int first, int secend) {/****/}; inline 函数对编译器而言必须是可见的,以便它能够在调用点内展开该函数.与非inline函数不同的是,inline函数必须在调用该函数的每个文本文件中定义.当然,对于同一程序的不同文件,如果inline函数出现的话,其定义必须相同.对于由两个文件comput

【转】ios内联函数 inline

ios内联函数 inline 缘由 由于在学习使用UIScrollVew开发的过程中,碰到下面这个属性(设置内边距): @property(nonatomic) UIEdgeInsets scrollIndicatorInsets; // default is UIEdgeInsetsZero. adjust indicators inside 1 光看UIEdgeInsets这个类型,一时还不知道它的具体内部结构是怎么样的,于是继续点进去发现它的定义如下: typedef struct UIE

(转)内联(inline)函数与虚函数(virtual)的讨论

本文转自: http://topic.csdn.net/t/20051220/09/4469273.html 函数的inline属性是在编译时确定的, 然而,virtual的性质是在运行时确定的,这两个不能同时存在,只能有一个选择,文件中的inline关键字只是对编译器的建议,编译器是否采纳是编译器的事情. 1.内联函数是个静态行为,而虚函数是个动态行为,他们之间是有矛盾的. 2.我们之所以能看到一些象内联函数的虚函数,是因为某个函数是否是内联函数不是由我们说的算,而是由编译器决定的.我们只能向

CSS font-size: 0去除内联元素空白间隙

我们在编写HTML标签的时候,通常会使用换行,缩进来保证代码的可读性.同时,在编写CSS样式的时候,也会需要把一些元素设置为inline或inline-block.这样一来,有时在页面中会出现意外的空白间隙导致页面视图与本意不符. 先来了解一下出现空白间隙的原因吧!因为内联元素默认排版中有空白间隙,以此来把每一个内联元素独立分开,这里的空白间隙也就是空白的文本节点,在缩进代码时会占据宽度,所以就导致了意外的空白间隙. 那么接下来为大家提供三种解决方法 1.去掉两个HTML标签中的空白,也就是去掉

去除内联元素(inline-block元素)之间的间距

说这个是因为inline元素和inline-block默认都会有间距,怎么去掉默认距离呢? 1:用浮动 float:left; 2:先设定子元素字体,再设置父元素font-size:0px(这个方法在不能用浮动的时候用 用过 挺管用的) 3:相关标签之间的  闭合标签不要换行  (这个维护起来比较麻烦,程序猿可能不懂 之间换行之类的) 4:设置margin-right为负值,但要考虑上下文的字体和文字大小 5:设置父元素letter-spacing或word-spacing为负值,要考虑字体,子

inline元素、block元素

inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能容纳文本和其他内联元素 只有水平方向margin-left.margin-right.padding-left.padding-right会产生边距效果 block元素 会独占一行,默认情况下,其宽度自动填满父级元素宽度 高度.行高.以及外边距和内边距都可控制 宽度缺省时默认容器的百分之百 可以容纳

inline元素、block元素、inline-block元素

inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示,多个block元素会各自新起一行. inline-block 内联块级元素: 具有宽度高度特性,又具有同行特性(一行内显示) 常見的inline元素:span,a,strong,em等. 常見的block元素:div,p,h1到h6,form,ul,ol等. 常見的inline-block元素:im

内联(inline)函数

内联函数避免函数调用的开销将函数指定为内联函数,(通常)就是将它在程序中每个调用点上“内联地”展开.假设我们将shorterStirng定义为内联函数,则调用:cout<<shorterSring(s1,s2)<<endl;在编译时将展开为:cout<<(s1.size() < s2.size() ? s1 : s2)       <<endl;从而消除了把shorterString写成函数的额外执行开销.在函数返回类型前加上关键字inline就可以将