HTML行内块元素的显示出现空格的问题

最新推荐文章于 2024-05-28 11:12:38 发布

majiang8823

最新推荐文章于 2024-05-28 11:12:38 发布

阅读量616

点赞数

文章标签： html

本文链接：https://blog.csdn.net/majiang8823/article/details/109584402

版权

问题描述：

HTML行内块元素在网页上出现空格

我们在写HTML代码的时候，有时候会用到行内块元素，行内块元素它的定义是，有宽高并且独占一行。：

例如：我们要用到许多行内块元素，并写成以下情况

	<input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">

当我在浏览器运行的时候，会发现每个input之间会一个空格在他们中间，这样的情况显然我们不希望发生，

在这里插入图片描述

首先我们排除了input的默认margin，给它加上是没有什么效果的；当我们在HTML代码中输入多个空格的时候，浏览器也只会给我们解析成为一个空格，从这个方面去推论的话，我们会发现当我们换行的时候，浏览器也会给我们解析成一个空格

当我们把input写到一行的时候，这些问题可以从根本上解决问题，但是影响了代码的美观和阅读效果

所以我们可以把行内块转换成块级元素，这是工作中用到最多的一种方法
或者我们可以把行内块元素进行浮动处理，也会解决上面出现空格的问题

关注