解决设置padding属性后盒子被撑大问题

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

露沐烟疏冉冉时

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

阅读量468

点赞数 10

文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_62582043/article/details/136716234

版权

1.问题

初始效果如图1，现想要图标和文字距离左侧一段距离，故设置

padding-left: 25%

设置后效果如图2，可见未达到预期效果

2.解决

显然盒子被撑大了，此时给盒子添加一个属性

box-sizing: border-box

效果如图3所示，问题解决

3.心得

给盒子添加padding属性时，最好同时设置一个

box-sizing: border-box

以防止盒子被撑大或者引起其他不必要的麻烦

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

露沐烟疏冉冉时

关注关注

10
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
解决设置padding属性后盒子被撑大问题

初始效果如图1，现想要图标和文字距离左侧一段距离，故设置设置后效果如图2，可见未达到预期效果。
复制链接

扫一扫

设置元素宽度和高度包括了 padding 和 border_box-sizing:border-box的作用

weixin_39785858的博客

12-01

1192

前言其实一直没仔细研究过CSS3新增的这个属性box-sizing，只是经常会看到其它网页和公司项目里面有用到这个属性。要想清楚这个属性的作用，首先要理解盒子模型，盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容），可以把每一个容器，比如div，都看做是一个盒子模型比如你给一个div设置宽高为500px，但实际你设置的只是conte...

盒子模型的内边距——padding

weixin_44004120的博客

01-16

3069

文章目录盒子模型的内边距——paddingpadding的基础属性padding复合属性padding会影响盒子实际大小如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入盒子模型的内边距——padding 盒子由border（边框）、content（内容）、padding（

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

padding盒子内部文字跟盒子之间的距离

09-25

如果说margin是盒子与盒子之间的距离，那么padding就是盒子内部文字跟盒子之间的，本例就来为大家详细介绍下，对此概念不是特别清楚的朋友可以参考下

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

最新发布

听海边涛声

06-23

276

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

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

oops

05-16

6464

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

padding撑大盒子解决方案

GGBond的博客

05-22

8094

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

解决CSS中padding（内边距）margin（外边距）撑大盒子的问题

d81895606的博客

03-14

911

在有添加padding（内边距）的样式中添加 box-sizing: border-box;

div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

09-28

总结来说，`box-sizing`属性是解决`div`等元素在`width: 100%`并添加`padding`或`margin`后超出父元素宽度的关键。通过将其设置为`border-box`，我们可以让元素的宽度和高度包含`padding`和`border`，保持整体布局的...

（三）盒子模型之内边距padding

weixin_47481102的博客

05-05

705

padding属性用于设置内边距，级边框与内容之间的距离。单位是px。属性作用 padding-left 左内边距 padding-right 有内边距 padding-top 上内边距 padding-bottom 下内边距练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta h

设置div的时候有时候用到宽度100%会导致撑破盒子的问题解决

weixin_42302291的博客

01-02

1796

相信大家在做网页页面设计的时候，都会遇到这么一个问题：在设计俄罗斯套盒的时候（我在说什么？）咳咳，即当盒子里面再套一个盒子的时候，里面盒子由于外面盒子的border和其本身设置的border，padding，margin等元素，会把外面的盒子给撑破了。即使在外面的盒子加了padding也不能解决这个情况。我在学习设计一个类似QQ空间的网页的时候也遇到了这个问题，里面text area撑破了外面的...

HTML中盒子模型六大属性

qq_39162309的博客

02-23

5662

一个网站就是靠盒子一个一个堆起来，HTML中所有的盒子都是矩形（一）盒子组成结构简单了解一个盒子是由如下几个区域组成： 1）盒子的内容区域：可以通过width和height来设置内容区域的宽高 2）盒子的内填充区域（补白） padding ：通过padding来设置，这个padding是分上下左右四个方向。 3）盒子的边框区域 border：通过border来设置，分上下左右四个方向。 ...

CSS基础：盒子模型&padding撑大盒子

weixin_52854090的博客

10-07

1127

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 盒子模型分为三个部分：从内至外分别是：盒子内容、盒子内边距padding、盒子边框border、盒子外边距margin 每个属性都有四个方向：上top、右right、下bottom、左left*/ .

静态页面常见问题 margin-top塌陷、padding把盒子撑大

weixin_44038506的博客

03-30

2000

一、静态页面 margin-top塌陷解决方法１.当我们页面布局时，经常会遇见margin-top塌陷问题　　margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父div包裹着一个div的时候，当给子div设置margin-top属性时，此时只是想让子div的边框距离父div边框有一段距离，而却出现了父div的顶端距离出现了位移，这就是margin-top塌陷的现象...

div因为padding属性被撑开

lyx058019的博客

07-26

1130

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

padding 把盒子撑开的解决方案

大尧酱的博客

11-11

2723

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

padding影响盒子大小的情况

qq_42318977的博客

12-16

1380

padding撑大盒子

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