解决padding撑大div盒子的问题

前言

最近在优化项目的过程中,发现使用了padding以后。

当点击操作时盒子老是会被撑大,起初以为是因为设置margin的原因 但是也设置了溢出配置 overflow: hidden; 。

后来发现原来是padding的原因,去css查了一下,原来 盒子宽度=padding+border+内容宽度。

解决办法

  1. 设置 盒子宽度=padding+border+内容宽度 可以解决盒子被撑大的问题
  2. 在使用padding的 div里 设置
    box-sizing: border-box;

原因:因为在设置了 box-sizing: border-box; 以后 相当于把padding和border的值都算在content里、

盒子模型会自动根据padding和border的值来调整content的值,就不需要手动调整

上一篇 MySQL之配置环境变量
下一篇 MYSQL之数据库连接
距离活动开始
-- 天
:
-- 时
:
-- 分
:
-- 秒
00 : 00 : 00
2026年 10月 1日 星期四

今日时光

00 : 00 :00
已过 0 天 剩余 0 天
0%
目录
涛哥

涛哥管理员

一名95后Java全栈开发程序员,95后技术分享博主,致力于技术分享和个人项目创作

本月创作热力图

少
多