这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战
前言
在平时的工作中，经常会遇到放大某个元素的可点击区域，但是不影响整个页面的布局的需求。这篇文章就整理下常用的放大元素可点击区域的方法，如果后边遇到新的实现方式，也会随时来补充。
方案
1. 设置伪元素
通过设置::before/::after伪元素来增大元素的可点击区域。伪元素本身不占用DOM节点，用来扩大元素的区域是一种很好的方法。
<head>
<style>
.container{
width: 100px;
height: 100px;
position: relative;
margin: 20px;
border: 1px solid red;
}
.container::after{
position: absolute;
content: '';
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
}
</style>
</head>
<body>
<div class="container">
</div>
结果如图：
我们知道HTML元素分为两种类型：块级元素和行内元素。块级元素都是可以直接设置伪元素的，但是部分行内元素却是无法去设置伪元素的，如替换元素img，a等。
2. 设置隐藏透明边框
<head>
<style>
.container{
width: 300px;
height: 100px;
padding: 20px;
border: 1px solid red;
}
button{
border: 10px solid transparent;
}
</style>
</head>
<body>
<div class="container">
<button>通过设置边框来扩大点击区域</button>
</div>
</body>
结果如下图：
3. 内联元素增加上下padding
由于行内元素自身的特殊性，大部分人可能觉得padding属性只能影响行内元素的水平方向，不会影响垂直方向（以前我也是这么以为的，直到看了张鑫旭大佬的CSS世界以后）。
其实真实情况是padding也会影响内联元素的垂直方向，但是对上下元素的原本布局没有影响，仅是垂直方向发生了层叠，所以看起来好像没有影响。这也是为什么可以用padding来扩大点击区域的原因。
<head>
<style>
div{
padding: 30px;
}
a{
padding: 20px 0;
}
</style>
</head>
<body>
<div>
<a>扩大点击区域</a>
</div>
