加padding之后盒子会被撑大的解决办法

最新推荐文章于 2024-06-23 12:25:57 发布

前端大斗师

最新推荐文章于 2024-06-23 12:25:57 发布

阅读量7.2k

点赞数 5

分类专栏： css 文章标签： css html html5 css3

本文链接：https://blog.csdn.net/Web_chicken/article/details/108559612

版权

css 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

加padding之后盒子会被撑大的解决办法

盒子代码:

       div{
            margin:0 auto;
            margin-top:400px;
            width:100px;
            height:100px;
            text-align: center;
            border:2px solid black;
        }
    </style>

</head>
<body>
 <div>我是内容</div>

运行示例
在这里插入图片描述

这是正常的页面然后我们给内容部分加个padding:10px;
效果如下：
在这里插入图片描述
我们可以看到现在盒子宽度是：100+两个padding+两个border=124px;
同理宽度是：100+两个padding+两个border=124px;

很明显的盒子被撑大了

然后我们加入如下代码

box-sizing: border-box;

我们再看下运行截图：
在这里插入图片描述
我们看到浏览器自动计算了内容的宽高从而保持原有的高度和宽度

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端大斗师

关注关注

5
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

影响盒子大小的因素，案例-利用padding改变盒子大小的性质来制作导航栏

qq_43632490的博客

06-03

980

padding和border的设置会影响盒子的实际大小，因此需要注意一下width和height的设置，注意去掉padding和border的大小。模拟新浪导航栏：

css中塌陷问题怎么解决，margin和padding应该怎么区分

夸克IT

09-08

2498

css基础篇（第三篇）回顾在上一篇中我们基本了解了css中background的综合写法以及css中的权重优先级问题，在这一讲中我们会认识一个比较重要的padding和margin，并且会了解到css中的塌陷问题，这在往后工作和学习中都是必不可少的部分甚至相当重要。如果不了解或者不太熟悉css基础的话，建议去看一看之前的篇幅，这一篇接着css开始讲。看透网页的本质在现代的html布局中，我们基本上都是使用盒子模型来布局，简而言之就是利用div来布局，所以说往后对于整个盒子的控制是一个重点。最重要的是

3 条评论您还未登录，请先登录后发表或查看评论

加padding、border后盒子被撑大的解决方法

oops

05-16

6567

加上padding和border后盒子被撑大了怎么解决？关于盒子被撑大，这就要涉及到盒子模型的知识了，一个盒子由内容、padding、border和margin组成，导致盒子被撑大的主要原因就于padding和border了。这里有两种解决办法 一、修改盒子的宽高给多少的padding和border值就减去多少的盒子长度，可以解决撑大盒子问题，不过这个方法不太推荐。二、给盒子添加一条属性可以完美解决盒子撑大问题 “box-sizing” .box { box-sizing:..

padding会影响盒子实际大小

weixin_55391257的博客

07-08

3377

padding，会影响盒子的实际大小，如果盒子本身已经有了宽度和高度，此时再指定内边距，会撑大盒子。如果想保持盒子大小跟效果图一致，则让宽度和高度减去多出来的内边距即可。 padding的特殊情况：如果盒子本身没有指定宽度或高度，则此时padding不会撑大盒子。 ...

设置padding会把div撑开的原因以及解决办法

热门推荐

一颗程序猿

10-03

1万+

因为Div添加了内边距属性，Div的实际宽度=Div的初始固定值+边距值（高度同理）例如Div设定为宽度为100px，添加5px的上下左右内边距，该Div的最后宽度为100+5+5=110px。 CSS padding 属性定义元素边框与元素内容之间的空白区域。内边距数值设置相同，只需要写成：padding:10px; padding 接受长度值或百分比值，但不允许使用负值所以如果需要给...

div因为padding属性被撑开

lyx058019的博客

07-26

1188

使用box-sizing属性来控制元素的尺寸计算方式。div的padding被撑开是因为在CSS中，元素的padding（内边距）是包含在其总尺寸内的。也就是说，如果你给一个div设置了padding，那么这个padding会在元素的宽度和高度之间添加空间，从而使元素的总尺寸增加。将div的border设置为其尺寸的一半，这样就可以达到padding的效果，但不会增加元素的总尺寸。以上是几种解决div的padding被撑开的方法，你可以根据具体情况选择适合的方法。

CSS学习笔记10——盒子模型

lxy95512的博客

01-13

185

页面布局要学习三大核心，盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布顾页面。网页布局过程: 1.先准备好相关的网页元素，网页元素基本都是盒子Box。 2.利用CSS设置好盒子样式，然后摆放到相应位置。 3.往盒子里面装内容。盒子模型组成盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS好模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。边...

自学前端第九天 : CSS标准盒子模型

weixin_47592060的博客

05-04

966

标准盒子模型（CSS重点）其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 1.前提了解: ①为什么要一定提前清除CSS盒子样默认样式 * {margin: 0;padding: 0;} 因为浏览器是默认使用CSS的stylesheet样式表的,而这个

CSS 盒子模型

酷爱前端的小陈博客

05-07

391

页面布局要学习三大核心, 盒子模型, 浮动和定位. 学习好盒子模型能非常好的帮助我们布局页面. 1.1 看透网页布局的本质网页布局其实就是每一个大的盒子包小的盒子，然后一点点堆积起来，最后得以将网页搭建起来。网页布局过程： 1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。 3. 往盒子里面装内容. 网页布局的核心本质：就是利用 CSS 摆盒子。 1.2 盒子模型（Box Model）组成 .

④CSS盒子模型

LINZHONG21的博客

10-10

246

1.盒子模型 1.1看透网页布局的本质网页布局过程: 1.先准备好相关的网页元索,网页元索基本都是盒子Box. 2.利用CSS设置好盒子样式,然后摆放到相应位置。 3.往盒子里面装内容. 网页布局的核心本质:就是利用CSS摆盒子。 1.2盒子模型( Box Model )组成所谓盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子 ,也就是一个盛装内容的容器。 CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距、和实际内容 1.3边框( border ) b

padding 把盒子撑开的解决方案

大尧酱的博客

11-11

2737

在盒子中添加box-sizing: border-box; 就可以解决了注意：宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（img标签和input除外）计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况如果一个盒子没有给定宽度/高度，就会用其父类的属性，这时padding不会影响盒子的大小原因：因为Div添加了内边距属性，Div的实际宽度=Div的初始固定值+边距值（高度同理）例如Div设定为宽度为100px，添加5px的上下左右内边距..

padding撑大盒子解决方案

GGBond的博客

05-22

8109

1.通过计算把width和height减去padding的值 2.设置box-sizing的值为border-box <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style...

HTML+CSS-01：padding使用，对盒子的影响

Luckly_smile的博客

05-03

1511

padding使用，对盒子的影响一、介绍 padding主要用来对box（盒子）里面内容进行设置内边距。目的：控制box（盒子）里面的内容里边框的距离，为了更加好看二、使用问题使用过程：使用的过程中，可能会出现，padding的设置会撑开box的大小。如没有设置padding前： 1.设置一个div内部含文字，大小为200px 2.然后设置padding：20px后，整个div变为240px×240px 3.结论发现padding的出现会把原本的div，即盒子撑开大小，这样我们的盒子

解决加padding后盒子模型变大的问题

hyb1234hi的专栏

04-29

4324

-moz-box-sizing: border-box; /*Firefox3.5+*/ -webkit-box-sizing: border-box; /*Safari3.2+*/ -o-box-sizing: border-box; /*Opera9.6*/ -ms-box-sizing: border-box; /*IE8*/ box-sizing: border-box; /*W3

CSS：padding(内边距)会影响盒子实际大小

加padding之后盒子会被撑大的解决办法

加padding之后盒子会被撑大的解决办法

很明显的 盒子被撑大了

很明显的盒子被撑大了