增大超链接a的点触范围，同一行出现空白间隙

who am I？ 6666

于 2021-07-25 09:34:52 发布

阅读量444

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端入门小练习持续更新文章标签： css

本文链接：https://blog.youkuaiyun.com/machine_vision123/article/details/119077734

前端入门小练习持续更新专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个初学者常见的HTML布局问题——如何消除超链接a标签之间的空白缝隙。通过将a标签设置为内联块元素并调整其宽度和高度，可以有效避免换行产生的间隙。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作为初学者，一个简单的代码换行导致的问题，刚开始是检查不出来的，例如下面代码body

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>增加超链接a的点触范围</title>
    <style>
      a {
        width: 100px;
        height: 100px;
        /* 把行内元素转换成行内块元素设置宽度和高度 */
        display: inline-block;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <a href="#">超链接</a>
    <a href="#">超链接</a>
  </body>
</html>

代码实现效果：