padding会影响到元素的大小，那不想让它影响到元素的宽度应该怎么办？

在前端开发中，padding确实会影响元素的大小，包括宽度。如果你不想让padding影响元素的宽度，有几种常见的解决方法：

1. 使用box-sizing: border-box;: 这是最常用的也是推荐的解决方案。box-sizing属性控制如何计算元素的总宽度和高度。

   • content-box (默认值): 宽度和高度只应用于内容。 padding和border会添加到元素的总宽度和高度之外。
   • border-box: 宽度和高度包括内容、padding和border。这意味着，即使你增加了padding，元素的总宽度也不会改变，padding会从内容区域中减去。

   .element {
       box-sizing: border-box;
       width: 200px;
       padding: 20px; /* 不会增加元素的总宽度 */
   }
   

2. 使用calc()函数计算宽度: 你可以使用calc()函数来动态计算宽度，减去padding的值。

   .element {
       width: calc(200px - 40px); /* 200px是期望的总宽度，40px是左右padding之和 */
       padding: 20px;
   }
   

   这种方法比较灵活，可以根据不同的padding值动态调整宽度。但是，如果padding的值是百分比或者动态变化的，这种方法就比较麻烦。

3. 负margin: 可以使用负margin来抵消padding增加的宽度。 不推荐这种方法，因为它容易导致布局混乱，难以维护，并且可能在不同的浏览器中表现不一致。

   .element {
       width: 200px;
       padding: 20px;
       margin: 0 -20px; /* 左右margin各-20px，抵消padding */
   }
   

总结:

强烈建议使用box-sizing: border-box;。 它简洁易懂，并且被广泛支持。 calc()函数在需要更精细控制的情况下也很有用。 应尽量避免使用负margin。

另外，如果你的元素是内联元素 (例如 <span>), padding会影响水平方向的空间，但不会影响行高。如果要控制内联元素的尺寸，可以将其设置为display: inline-block; 或 display: block;。

希望这些信息能帮到你!