1、6内边距padding

最新推荐文章于 2024-06-24 16:05:11 发布

这一片月

最新推荐文章于 2024-06-24 16:05:11 发布

阅读量245

点赞数

分类专栏： css样式文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_62865634/article/details/127352293

版权

css样式专栏收录该内容

41 篇文章 1 订阅

订阅专栏

提示：文章写完后，当我们给盒子指定padding值后，发生2件事情。

1、第一件事情内容与边框添加了距离。

2、第二件事情padding盒子影响。

也就是说，盒子已经有了宽高，此时指定内边距会把盒子撑大

解决方法：

如果保证盒子与效果一致，则让用宽高减去内边距

width：“200px”

heght：“200px”

padding：“10px”

200+10+10=220像素（宽，宽有上下两边）

200+10+10=220像素（高，高有上下两边）

如果不想变200，就用200-20=180，就宽高用180就可以了。

自己代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置padding盒子会变大解决方法</title>
    <style>
        div {
            width: 180px;
            height: 180px;
            background-color: pink;
            padding: 5px;
            /* 这个就是用宽高来减去边框距离可以得需要方框、也不会撑大或变形 */
            /* 180+5+5=190高宽一样的 */
        }
    </style>

</head>

<body>
    <div>确定中心，写出深意。我们要着于挖掘所写事件中含有的生活哲理或找出它闪光的地方，反复思考，确定文章的中心思想。即善于从普通的小事中写出深意来。</div>

</body>

</html>