块元素div转变为行内块元素之后如何消除之间间隙

写了三个div，使其变成行内块元素之后，发现，有间隙，哟，我的小天使啊。

最外层父级div宽度width大于三个小div宽度之和
父级div：

#aaa{width: 400px;margin: 0 auto;margin-top: 50px;border: 1px solid navy;}

三个子级div：

#a1{width: 130px;height: 40px;font-size: 20px;color: white;text-align: center;background-color: aqua;display:inline-block;}#a2{width: 130px;height: 40px;font-size: 20px;color: white;text-align: center;background-color: wheat;display:inline-block;}#a3{width: 130px;height: 40px;font-size: 20px;color: white;text-align: center;background-color: darkblue;display:inline-block;}

html样式：

<div id="aaa"><div id="a1">aaaa</div><div id="a2">aaaa</div><div id="a3">aaaa</div></div>

修改方法一：父级div添加font-size：0px；具体如下：

#aaa{width: 400px;margin: 0 auto;margin-top: 50px;border: 1px solid navy;font-size: 0;}

请看最后一句，他的结果就是，间隙消失了，哈哈哈。
之所以会有间隙，在网上查找的是因为回车键的问题，所以，如果将三个div从头到脚的连起来，不使用回车键的话，也可以消除间隙，但是，太丑了，这代码，我就不写了，用fongt-size为0也有坏处，就是里面的字体就没有了，需要重新设置，总之各有利弊。

块元素div转变为行内块元素之后如何消除之间间隙相关推荐

css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
【CSS】通过定位修改 display 显示模式 ( Display 显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 )
文章目录一.Display 显示模式转换二.块元素示例三.inline-block 改元素为行内块元素示例四.为块元素设置浮动五.为块元素设置定位一.Display 显示模式转换 disp ...
CSS 块元素,行内元素,行内块元素及元素之间转换
元素的显示模式元素一般分为块级元素和行内元素元素种类排列设置样式默认包含块元素独占一行可以设置宽高容器的100% 可以包含任何标签行内元素一行可以放多个行内样式不可直接设置宽 ...
html行内元素转为块级元素,前端面试题-行内元素和块级元素
一.行内元素一个行内元素只占据它对应标签的边框所包含的空间. 二.块级元素块级元素占据其父元素(容器)的整个空间,因此创建了一个"块".通常浏览器会在块级元素前后另起一个新行. ...
行内元素、块级元素和行内块元素
HTML 可以将元素分类方式分为行内元素.块级元素和行内块元素. 使用display属性能够将三者任意转换: display:inline;// 转换为行内元素 display:block;// 转换 ...
专题 | 块级元素行内元素行内块元素
它们本身的宽度如何计算高度如何计算----当时的想法是? 以后补他们三个能否嵌套块级元素行内元素还有特殊的a标签块级元素块级元素高由内容撑起,宽默认100%,可以自己设置元素宽高. 块级元 ...
行内元素，行内块元素，块元素的区别
前言:本人是新生小白,如有错误之处欢迎指出首先我们先来介绍行内元素 inline <body>常见的行内元素有<span>ddd</span><a href ...
行内块元素上下错位问题
行内块元素上下错位问题行内块上下错位的原因: 不同的标签,浏览器默认的对齐方式(vertical-align:baseline)不同, 比如图片默认顶对齐,文字默认底对齐. 所以当文字旁边搭配图片时 ...
CSS学习05：块元素、行内元素、行内块元素
目录 1.块元素常见的块元素: 块级元素的特点: 注意: 2.行内元素常见的行内元素: 行内元素的特点: 注意: 3.行内块元素常见的行内块标签: 行内块元素的特点: 三种元素之间互相转换三种 ...

块元素div转变为行内块元素之后如何消除之间间隙

块元素div转变为行内块元素之后如何消除之间间隙

块元素div转变为行内块元素之后如何消除之间间隙相关推荐

最新文章

热门文章