给DIV添加padding的时候需要对边框宽高进行修改来确保大小不变么

最新推荐文章于 2022-03-23 16:01:49 发布
最新推荐文章于 2022-03-23 16:01:49 发布
阅读量2.8k 收藏
点赞数
分类专栏： CSS
padding是设置内边距的,如果要保持DIV大小不变,设置了padding值后DIV的宽高要相应减去padding的值,如：

原本你DIV的宽高为400*500的,而你设置了这个DIV的内边距padding的值为：10px 10px 10px 10px（分别对应DIV上、右、下、左的内边距）,如果要保持DIV的大小不变,这时你DIV的宽高要设置为：380*480了.


记住，是padding * 2，减掉的长宽值

petercnmei
关注
专栏目录
div的样式之padding
weixin_45637488的博客
04-03 2335
padding：内容和边框之间的距离 设置padding宽度后，会发生在原有基础上发生扩张，背景颜色与div盒子的background-color相同。 <!-- 内边距(padding)：内容和边框之间的距离 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de
CSS 盒模型详解：从内边距padding到边框border
最新发布
前端基地
09-24 947
本文主要介绍 CSS 盒模型，包括盒模型介绍、padding（内边距）的相关内容如区域有颜色、一些标签默认带 padding 及小属性等，还有 border（边框）可按三要素、方向、每个方向每个要素拆分等，为读者全面呈现 CSS 盒模型知识。
DIV如何在保持padding的同时不影响整体尺寸
Perfect is Shit
05-13 3888
一般来讲，某个div如果设置了padding，那么这个div原本的尺寸会受到影响。 但是，可用通过设置box-sizing:border-box;这一参数解决该问题 请看如下代码： <div class="app1"></div> </br> <div class="app2"></div> <style scoped> .app1{ background:pink; width:100px; ...
控制margin,padding,使div不变大
兔老大的胡萝卜
03-23 1419
css3特性 box-sizing:border-box
padding小细节，padding影响方框的宽和高，padding怎么用
啊哈嗯嗯的博客
04-18 1820
如果你对margin、padding还不是很了解的话，请看看以下这篇文章。 本文链接：https://blog.csdn.net/weixin_44937336/article/details/105320783 使用 padding 的时候，你是否知道它会影响盒子的高度和宽度。 首先定义100px，200px两个方框。 想法是：设置橙色方框的内边距50px——padding：50px; ，...
CSS开发技巧（五）：妙用padding实现元素的高度和宽度保持比例
u012443286的博客
02-29 1422
在前端开发中，我们可能需要实现一定的适配，其中常见的一个需求是： 元素保持高宽比，等比例进行缩放。 思路分析 现在，我们来分析这一需求： 由于需要缩放，宽度和高度都不能写成固定值。 要保持高宽比，元素的高度和宽度中有一个属性需要根据另一个属性计算得到，那么先确定高度还是宽度呢？显然，应该先确定宽度。我们的前端开发中一般对于页面高度不会有过多的要求，相比而言宽度显得更为“珍贵”，因此应该先确定...
CSS系列之内边距 padding
老__L的博客
01-26 7561
本文主要介绍CSS的padding、padding-bottom、padding-left、padding-right、padding-top属性。内边距是指边框与内容之间的距离，内边距不允许有负值。
控制一个DIV内所有图片宽度超出后自动调整为指定大小
08-27
在网页设计中，为了确保页面布局的一致性和美观性，我们常常需要对嵌入到网页中的图片进行尺寸控制。特别是在响应式设计中，图片需要能够根据不同的设备屏幕尺寸自动调整大小。本文将详细介绍如何通过CSS实现当一个`...
css中button宽高大小不包含boder问题和文字不居中问题
u014084837的博客
07-19 2873
css中button宽高问题 首先给button设置宽高 <style> /*首先给button清除默认样式*/ button{ padding: 0; margin: 0; border: none; } button{ ...
独行DIV自适应宽度布局CSS实例与应用范围
12-13
在这样的布局中，DIV元素的宽度不是固定不变的，而是根据其所在容器的大小动态调整。这在当前移动优先的设计理念下显得尤为重要，因为它允许网页在桌面、平板电脑和手机等不同设备上呈现出最佳的视觉效果。 关键...
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
09-24
div往往会因为内边距的设置而使整个层宽度和高度超出预定范围,而CSS3的box-sizing属性可以简单解决这样的现象,下面我们就来详细解说使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
让border、padding等不改变原本宽度
u_awesome的博客
03-26 4469
http://www.w3school.com.cn/cssref/pr_box-sizing.asp box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */
不让padding影响元素的宽度
weixin_30642305的博客
10-26 931
CSS3 新增了 box-sizing 属性。 以前，如果指定 div 的宽度为 div { width: 100px; height: 100px; padding: 10px; } 则包含 padding，div 的实际宽度为 120px。 有时我们不希望 padding 影响到 div 的实际宽度。以前只...
css实现保持div的等宽高比
weixin_30772105的博客
06-05 597
这篇文章主要为回答这个问题：“做响应式网页，如何让一个div的高和宽保持比例放大或是缩小？”，这里不介绍媒体查询的实现。 那么css如何实现高度height随宽度width变化保持比例不变呢？即给定可变宽度的元素，它将确保其高度以响应的方式保持成比例(即，其宽度与高度的比率保持恒定)。 下面以高宽 2:1 为例，通过2种方式来实现这种效果。 方式一：利用定位实现 .wrappe...
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
weixin_34216196的博客
07-05 445
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一、总结 一句话总结：直接加上box-sizing:border-box;即可解决上述问题。 1、box-sizing的三个属性分别是什么？ 根据意思来记很好记的 值一、content-box （向外边框） 值二、border-box （向内边框） 值三、inherit （继承爸爸）...
padding影响div宽高解决方法
jiangwei1994的博客
04-10 2325
在开发中，有时我们不希望 padding 影响到 div 的实际宽度，为了不让padding影响整个div的实际宽度，我们可以设置一个css属性： box-sizing:box-sizing
保持div的宽高比
不爽的麻雀的博客
08-17 2626
&lt;div style="width: 100%;background-color: #255625;position: relative;padding-bottom: 44%"&gt; 通过将padding-bottom这个属性设定为百分比(百分比为高/宽),从而保证div的宽高比 高/宽 = 50%时,各种状态下的div框 高/宽 = 100%时,各种状态下的div...
CSS实现自适应下保持宽高比
热门推荐
诗渊的博客
09-25 1万+
本文介绍了如何实现保持宽高比不变，分别给出了CSS实现方法以及jquery的实现方法。
要求使用<div>标签及其宽高、边框、内外边距属性。
09-24
你可以使用它来设置元素的宽高、边框以及内外边距。以下是一些基本的CSS属性说明： 1. **宽度** (`width`)：设置`<div>`的宽度，例如 `width: 200px;` 或 `width: 50%;` 可以指定固定像素值或百分比。 2. **高度**...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值