inline-bock间隙问题

当我们想让多个div标签排在同一水平线上时，我们一般第一时间想到的就是display:inline-block，但是此时每个div之间都有一定的间隙，这就是inline-block间隙问题，也有人叫换行符/空格间隙问题

举一个简单的例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}.test {width: 600px;border: 1px blue solid;}.test div {width: 100px;height: 100px;display: inline-block;background: blue;}</style></head><body><div class="test"><div></div><div></div><div></div><div></div><div></div></div></body></html>

那么如何解决这个问题：
1.将父元素的font-size设为0，子元素根据需求做出相应的调整

2.将div之间的换行给删除，就是写成下面这样

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}.test {width: 600px;border: 1px blue solid;/* font-size: 0; */}.test div {width: 100px;height: 100px;display: inline-block;background: blue;}</style></head><body><div class="test"><div></div><div></div><div></div><div></div><div style="width: 200px;height: 200px;"></div></div></body></html>

这样其实是很不美观的，所以不建议这样做
3.设置margin为负值，我用了chrome，Firefox，Ie，Edge，都是margin-left:-5px

4.使用float属性，子元素设置float属性，但是会引发高度塌陷问题，需要清除浮动流

5.父元素display属性为table

inline-bock间隙问题相关推荐

前端inline元素间隙问题解决办法
一些刚刚入门学习web前端的小伙伴在刚刚接触inline元素的时候,是不是会遇到这样一个问题,两个元素比如< span >中间总是有一个小间隙,无法去除掉,那么应该如何解决呢? 当我们给s ...
Web前端之网页导航----126邮箱(关于position)
原图我做的这里主要讲讲position:absolute;和position:relative; ①这里先看两个标签<header />,<nav />,他们是html5标 ...
web前端面试--浏览器兼容性问题
web前端面试本人是一个web前端开发工程师,主要是vue框架,整理了一些面试题,今后也会一直更新,有好题目的同学欢迎评论区分享 ;-) web面试题专栏:点击此处文章目录 web前端面试前言 ...
图片下方出现几像素的空白间隙
1.如何定义高度很小的容器? 在IE6下无法定义小高度的容器,是因为有一个默认的行高. 列举2种解决方案:overflow:hidden | line-height:0 2.图片下方出现几像素的空白间 ...
横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先: 一.并排在一行的两个div样式有这种情况:ie或者ff下对于子 ...
inline-block空白间隙
很多时候display:inline-block比float:left;好用.也因为IE6 7不支持inline-block,所有一般都这样写:{display:inline-block; *disp ...
line-height与图片底部间隙的学习整理转述
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 看大牛张鑫旭的视屏可能会理解的更深一些,点击这里: line-height,两行文字的基线之间的距离: 基 ...
block,inline,inline-block的区别
最近正在复习,紧张地准备几天后的笔试,然后刚好看到这个地方. block:块级元素,会换行,如div,p,h1~h6,table这些,可以设置宽高: inline:行内元素,不换行,挤在一行显示 ...
CSS之布局方式(内/外部显示及inline-block显示类型)附＜行内块空白间隙解决方案＞
文章目录一.布局方式 1. 外部显示类型 a.块级盒子/元素 b.行内盒子/元素 2. 内部显示类型 2.1 flex 流式布局二.行内块元素inline-block 显示类型 2.1行内块的空白 ...
display:inline-block 间隙
IE6/7是不支持display:inline-block属性,只是让其表现的跟inline-block一样,尤其对于inline水平的元素,其表现度可以用perfect一词来形容了. 对于IE8+以 ...

inline-bock间隙问题

inline-bock间隙问题相关推荐

最新文章

热门文章