关于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. jmeter中使用jdbc参数化

    以读取mysql数据库为例 1.下载一个mysql驱动包,最好去mysql官网下载 下载网址:https://dev.mysql.com/downloads/connector/j/ Select O ...

  2. scala下划线的用法

    1.作为“通配符”,类似Java中的*.如import scala.math._2.:_*作为一个整体,告诉编译器你希望将某个参数当作参数序列处理!例如val s = sum(1 to 5:_*)就是 ...

  3. 畅购商城(七)：Thymeleaf实现静态页

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star,更多文章请前往:目录导航 Thymeleaf简单入门 什么 ...

  4. 深入理解mysql-进阶知识点，启动项、系统变量、字符集介绍！

    mysql数据库是当前应用最为的广泛的数据库,在实际工作中也经常接触到.真正用好mysql也不仅仅是会写sql就行,更重要的是真正理解其内部的工作原理.本文先从宏观角度介绍一些mysql相关的知识点, ...

  5. resultMap的用法以及关联结果集映射

    resultType resultType可以把查询结果封装到pojo类型中,但必须pojo类的属性名和查询到的数据库表的字段名一致. 如果sql查询到的字段与pojo的属性名不一致,则需要使用res ...

  6. 分析"傍富婆发财"

    视频地址https://www.bilibili.com/video/BV1pZ4y1u7jf 半佛 被富婆阿姨毒打的原因: 1.地位不对等导致工具化 资源不对等的情况下,尤其是一方极度依赖另一方资源 ...

  7. SQL Server2017+SSIS+Python

    1.安装SQL Server2017 https://jingyan.baidu.com/article/76a7e409077997fc3a6e1559.html (1)JRE 7报错 只能安装JR ...

  8. QT QMdiArea 添加背景或添加背景图片失效问题

    说起QMdirArea 这个控件与其他控件真所不同.... 这里记一下 我踩过的坑之一,,,,, QMdiArea 默认的背景 不符合我要求,,当时我就理所当然就想往常一样给它设置颜色 万万没想到.. ...

  9. Vuex mapState的基本使用

    mapState把Store中的state映射到组件中的计算属性 Store文件 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ...

  10. 极简 Node.js 入门 - 2.3 process

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...