行内块元素之间的空白间隙

行内块元素换行或是之间存在空格的时候，浏览器解析默认会有空格。

示例：

<div><input type="submit" class="sub"><input type="reset" class="re">
</div>

可以看到两个行内块元素之间存在空格

解决方法：

1、敲代码时不要换行或空格

2、把父级font-size设置为0

3、给行内块元素添加float属性（浮动）

4、给行内块元素设置margin-left: -5px。

5、给行内块元素的父标签设置font-size:0, 自身设置font-size

其他值得注意的是插入图片时图片底部会有一小段空隙，那是图片与基线对齐的缘故，解决方法也很简单，只要将图片转换为块级元素即可display：block；

行内块元素之间的空白间隙相关推荐

HTML 之块级元素、行内元素和行内块元素之间的嵌套规则
一.简介之前对元素之间的嵌套规则没有进行系统的梳理,一直以为各种元素之间可以随意进行嵌套,但在实际敲代码的过程中发现并不是这样,大部分标签之间是可以随意嵌套的,但也存在一些特殊规则,比如:p标签内不 ...
六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用
7. 拓展@ 7.1 margin负值之美 1). 负边距+定位:水平垂直居中咱们前面讲过, 一个绝对定位的盒子, 利用父级盒子的 50%, 然后往左(上) 走自己宽度的一半 ,可以实现盒子水 ...
HTML块级元素、行内元素和行内块元素
HTML块级元素.行内元素和行内块元素块元素,行内元素和行内块元素之间的转换 HTML可以将元素分类方式分为行内元素.块状元素和行内块状元素三种.这三者是可以互相转换的,使用display属性能 ...
解决行内块元素（inline-block）之间的空格或空白问题
解决行内块元素(inline-block)之间的空格或空白问题参考文章: (1)解决行内块元素(inline-block)之间的空格或空白问题 (2)https://www.cnblogs.com/ ...
块元素div转变为行内块元素之后如何消除之间间隙
块元素div转变为行内块元素之后如何消除之间间隙写了三个div,使其变成行内块元素之后,发现,有间隙,哟,我的小天使啊. 最外层父级div宽度width大于三个小div宽度之和父级div: #aa ...
行内块元素的间隙解决办法
在默认情况下,行内块元素(例如img.input)都存在间隙问题,例如说div中不写宽高的时候,给了个粉色的背景色,方便能看出div和图片之间的间隙,这时嵌套一个img,由图片撑开div,这时会明显的 ...
【CSS】图片底部空白缝隙处理 ( 使用居中对齐 / 顶部对齐 / 底部对齐 | 将行内元素 / 行内块元素转为块级元素 )
文章目录一.图片底部空白缝隙问题二.图片底部空白缝隙问题解决方案一 ( 使用居中对齐 / 顶部对齐 / 底部对齐 ) 三.图片底部空白缝隙问题解决方案二 ( 将行内元素 / 行内块元素转为块级元素 ...
CSS 块元素,行内元素,行内块元素及元素之间转换
元素的显示模式元素一般分为块级元素和行内元素元素种类排列设置样式默认包含块元素独占一行可以设置宽高容器的100% 可以包含任何标签行内元素一行可以放多个行内样式不可直接设置宽 ...
css:块元素、行内元素、行内块元素以及三种元素之间的转换
一.三种元素的介绍 1.块元素块元素的特点独占一行,也就是会自动换行可以设置高度.宽度.外边距.内边距宽度默认是父元素的宽度常见块元素 <h1></h1>---< ...

行内块元素之间的空白间隙

行内块元素之间的空白间隙相关推荐

最新文章

热门文章