likes
comments
collection
share

如何增大一个换行元素的点击区域

作者站长头像
站长
· 阅读数 35

需求背景

团子有个大前端群，里面大家会提发现的美团的bug、交流技术方案等等，今天有个大佬在群里发了一个非常常见的需求场景以及遇到的问题：

如何增大一个换行元素的点击区域

如何增大一个换行元素的点击区域

集思广益很快就有了多种思路：

如何增大一个换行元素的点击区域

直至最后一个方案出现完成统一～

终极方案

html:

<!DOCTYPE html>
<html>
  <head>
    <title>Pizza Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="root">
      <p>这是一个段落呀 这是一个段落呀 这是一个段落呀 这是一个段落呀 这是一个段落呀<span class="tag">鱼香肉丝</span>这是一个段落呀 这是一个段落呀 这是一个段落呀 这是一个段落呀</p>
    </div>
  </body>
</html>

css:

p {
  width: 320px;
}
.tag {
  color: red;
  background-color: rgba(0,0,0,0.25);
  position: relative;
  padding: 10px;
  margin: -10px;
  cursor: pointer;
}

效果：

如何增大一个换行元素的点击区域

简单分析

首先明确不管对于content-box还是border-box，元素的点击区域是由border以内（包含border，padding，width/height）的区域组成的。

给padding一个值相当于扩大了元素的点击区域，padding: 10px相当于元素拓展了10px的点击区域，但是会与周围文字形成10px间隔。

-margin的一般用于元素位置移动（向负边距方向移动/向其他元素靠近），或者可以理解为元素本身缩小，margin: -10px可以理解为上下左右都小了10px的大小，即文字之间靠近了10px。

padding: 10px与margin: -10px结合的效果就是增加10px的可点击区域（10px的padding），缩小10px不可点击区域（10px的margin）。最终的效果就是文字之间没有距离，但是tag盒子多了外围10px的点击区域，可以理解为用不可点击区域换来的hh

end

负margin的含金量还在提升！在团子好好学吧

如何增大一个换行元素的点击区域

转载自:https://juejin.cn/post/7340167256267767844
评论
请登录