解决padding给元素的实际宽度带来的影响_内部元素 padding如何消除影响

作者：一键难忘520 | 2024-06-23 21:56:39

踩

内部元素 padding如何消除影响

box-sizing的使用！！！

如果设定元素的宽度为

	div { 
		width: 100px;
		height: 100px;
		padding: 10px;	
	}1
2
3
4

这个时候元素包含padding,元素的实际宽度是 120px。
box-sizing可以解决padding给元素的实际宽度带来的影响

	 div { 
		  box-sizing: border-box;
		  width: 100px;
		  height: 100px;
		  padding: 10px; 
	 }1
2
3
4
5

此时宽度是 100px。
元素设置了 box-sizing， padding就不会影响元素的宽度。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/一键难忘520/article/detail/750830