关于html行内块元素之间缝隙的那点儿事情

事情是这样子的，我起初打算验证使用transform属性的标签是否会影响其他的标签的布局，于是写了下面一段代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum=1.0, minimum=1.0, scalable=0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div {

            /* 转换显示模式设置宽高 */

            display: inline-block;

            width: 100px;

            height: 100px;

        }

        .a {

            transform: translateX(100px);

            background-color: red;

        }

        .b {

            background-color: blue;

        }

    </style>

</head>

<body>

    <div class="a"></div>

    <div class="b"></div>

</body>

</html>

结果呢也还算能接受：





但是，我发现了另外一个问题：





这之间的缝隙是什么东东？琢磨了好久也不知道。希望读者中有知道的麻烦评论告诉我一下，谢谢啦。

html行内块元素之间的缝隙的更多相关文章

  1. 解决行内块元素（inline-block）之间的空格或空白问题

    一.问题产生 由于html代码格式化后,标签会缩进或者换行.由于浏览器默认处理导致元素在页面显示中出现单个空格问题,尤其在行内或者行内块元素布局时影响比较明显 例如: 代码 页面显示 二.解决方案 这 ...

  2. 元素显示模式：块元素 & 行内元素 & 行内块元素

    元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...

  3. css——行内元素和块级元素的具体区别与行内块元素

    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...

  4. CSS 两个行内块元素，宽度相加刚好等于父盒子容器的元素，但第二个元素掉在第二行解决办法

    我们可以发现:两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行,这是什么问题呢? 我们先来看一下效果: <!DOCTYPE html> <html lang= ...

  5. CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

    vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...

  6. CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  7. __x__(17)0906第三天__块元素block_内联元素inline_行内块元素inline-block

    1. 块元素block 独占一行的元素 一般使用块元素包含内联元素,用作页面布局 <a> 标签可以包含任何除了a标签以外的元素 <p> 标签不能包含块元素 h1... ...h ...

  8. html——行内元素、块元素、行内块元素

    行内元素:span  ,a,  ,strong , em,  del,  ins.特点:在一行上显示:不能直接设置宽高:元素的宽和高就是内容撑开的宽高. 块元素:div,h1-h6,p,ul,li.特 ...

  9. HTML行内级元素之间的空格问题

    HTML行内级元素之间的空格问题 1.为什么元素之间会产生空格? 在编写行内级元素(包括inline-block元素)的代码之间如果有空格(换行),在浏览器上就会显示元素之间有空格. 示例代码如下: ...

随机推荐

  1. Python按值传递参数和按引用传递参数

    Python按值传递参数和按引用传递参数: 按值传递参数: 使用一个变量的值(数字,字符串),放到实参的位置上 注:传递过去的是变量的副本,无论副本在函数中怎么变,变量的值都不变 传递常量: # 传递 ...

  2. PHP preg_match() 函数

    preg_match 函数用于执行一个正则表达式匹配.高佣联盟 www.cgewang.com 语法 int preg_match ( string $pattern , string $subjec ...

  3. 读书笔记《数据结构与算法JavaScript描述》第一章

    第一章JavaScript的编程环境和模型 1.2JavaScript编程实践 1.2.1 声明和初始化变量 JavaScript中的变量默认为全局变量,如果初始化未被声明的变量,该变量就成了一个全局 ...

  4. webapp项目新建java class、webapp目录树结构

      上一篇中我们介绍了IDEA.maven新建webapp项目的两种方式,分别是:在命令行中用模板创建.直接在IDEA中选择骨架创建. 但都存在一个问题:目录树不完整.有些人会不知道接下来该如何创建j ...

  5. SET DYNAMICS 365 COLORS AND LOGO USING THEMES

    https://carldesouza.com/dynamics-365-colors-logo-themes/ BEFORE WE START, I NEED YOUR HELP. I AM SPE ...

  6. "点"醒自己

    回顾: 过去的经历 从18年开始在某机构进行了测试培训,9月正式加入测试小白大军,中间也经历了半年的空窗期,入职2个月应能力不够被公司辞退,后通过培训班的朋友内推到一家软件外包公司,工作到现在. 思考 ...

  7. Spring Boot Logback 默认配置

    Spring Boot Logback 默认配置 标签(空格分隔): Spring Boot Intro(介绍) Spring Boot 1.5.9 默认使用的日志框架是 Logback. 生效的默认 ...

  8. 面试这么撩准拿offer，HashMap深度学习，扰动函数、负载因子、扩容拆分，原理和实践验证，让懂了就是真的懂！

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 得益于Doug Lea老爷子的操刀,让HashMap成为使用和面试最频繁的API,没 ...

  9. Socket 由浅入深，开发一个真正的通信应用

    在说socket之前.我们先了解下相关的网络知识: 端口  在Internet上有很多这样的主机,这些主机一般运行了多个服务软件,同时提供几种服务.每种服务都打开一个Socket,并绑定到一个端口上, ...

  10. 2020-04-08：为什么TCP握手需要三次?

    假想一下,如果我们去掉了第三次呢?如果只是第二次建立的话,服务端和客户端就已经建立,但是如果客户端没有收到服务端的回应?这个时候,客户端认为没有建立,服务端却为认为建立成功,并保存了必要的资源,如果出 ...