解决CSS布局中padding-right不生效问题

拼搏现实的明天。 2023-10-11 16:38 38阅读 0赞

代码片段：

.top-info {
        
    	width: 100%;
    	position: absolute;
    	bottom: -30rpx;
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    	justify-content: space-between;
    	padding: 0 20rpx;
    }

此时的padding-right并不生效，加大padding-right的值也不会有效果

![问题复现][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Lq65Lq66YO95Zyo5Y-R5aWL_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]  
解决方法：

给元素添加\*\*box-sizing: border-box;\*\*属性，让元素变成一个盒模型。

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">content-box</td> 
   <td align="left">这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。</td> 
  </tr> 
  <tr> 
   <td align="left">border-box</td> 
   <td align="left">为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。</td> 
  </tr> 
  <tr> 
   <td align="left">inherit</td> 
   <td align="left">规定应从父元素继承 box-sizing 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

.top-info {
        
    	width: 100%;
    	position: absolute;
    	bottom: -30rpx;
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    	justify-content: space-between;
    	box-sizing: border-box;
    	padding: 0 20rpx;
    }

![成功解决][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Lq65Lq66YO95Zyo5Y-R5aWL_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Lq65Lq66YO95Zyo5Y-R5aWL_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/78b531af33bf4e659521272e0d2fbcc5.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Lq65Lq66YO95Zyo5Y-R5aWL,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Lq65Lq66YO95Zyo5Y-R5aWL_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: https://img-blog.csdnimg.cn/4ada022c10ee469db3dc972ffee5d823.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Lq65Lq66YO95Zyo5Y-R5aWL,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center