【CSS】Padding会增加元素大小

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.8k累计阅读 1.8k平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄10年

关注

原创最新推荐文章于 2026-03-11 05:49:10 发布 1.8k 阅读 AI 写同款· GEO 优化 ›

css3基础问题100问之内边距撑大盒子问题？（2）内盒尺寸计算（元素实际大小）盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框下面进行一个例题的讲解： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算盒子实际的大小</title> <style> div { width: 180px; height: 200px; ... 阅读详情

代码

<html>
<head>
<style>
	#one{
		width:200px;
		height:100px;
		padding:10px;
		margin:20px;
		background-color:#EFEFEF;
	}
</style>
</head>
<body>
	<div id="one"></div>
</body>
</html>

在这里插入图片描述
div的宽度变成220px，高度变为120px

收录于

前端

当前文章被收录于：

前端

75 篇文章 1 人学习

前端

订阅专栏查看详情

当前文章被以下社区和专栏收录：

Xilinx IP核 Block Memory Generator v8.4 的使用本文主要介绍如何使用并初始化 Xilinx 提供的IP核 Block Memory Generator v8.4`，为了确保成功初始化，还对其进行了一个简单的仿真，更多细节请参考官方手册。阅读详情

相关推荐

表格数据学习的图神经网络综述

今天学习一篇发表在中科院一区期刊《ACM Computing Surveys》的综述文章《Graph Neural Networks for Tabular Data Learning: A Survey with Taxonomy & Directions》，该刊主要刊载计算机理论方法领域的系统性综述与教程论文，注重跨学科技术融合研究，最新的影响因子为28.0。本文的目的在于通过学习这篇文章，了解关于表格数据学习点图神经网络一些基础知识。

qq_41009600的博客 799

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

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

weixin_44038506的博客 2233

【Unity】Spine动态换装进阶：SkeletonGraphic插槽级皮肤切换与内存优化

本文深入探讨了Unity中Spine动态换装的进阶技术，重点解析了SkeletonGraphic插槽级皮肤切换的实现原理与内存优化策略。通过代码示例展示了如何高效管理皮肤实例、避免内存泄漏，并提供了对象池、纹理合并等性能优化方案，帮助开发者提升2D角色换装系统的运行效率与稳定性。

food6的博客 196

内边距（padding会影响盒子内边距大小）

m0_67545415的博客 252

CentOS 7下Multipath多路径存储的实战配置与性能优化

本文详细介绍了在CentOS 7系统中配置与优化Multipath多路径存储的完整实战流程。从安装部署、核心配置文件解读，到性能调优与生产环境避坑指南，全面解析如何利用Device Mapper Multipath构建高可用、负载均衡的存储链路，提升存储系统可靠性与I/O性能。

weixin_29278805的博客 320

奥比中光Gemini335L SDK实战：从标定参数到3D点云转换

本文详细介绍了奥比中光Gemini 335L深度相机的SDK实战应用，重点讲解如何跳过繁琐的棋盘格标定，直接调用出厂预标定参数实现高效的3D点云转换。通过解析内参、外参获取及四种核心坐标转换模式，并结合OpenCV等工具，指导开发者快速将相机集成到机器人抓取、三维测量等项目中，实现开箱即用的3D视觉解决方案。

raspberrypi5的博客 639

CSS盒子模型

css盒子是一个比喻，HTML中所有的标签都是盒子在HTML中的所有标签都可以设置宽度/高度==指定可以存放内容的区域内边距==填充物边框==盒子外边距==盒子和盒子之间的间隙内容的宽度和高度：通过标签的width/height属性设置的宽度和高度元素的宽度和高度：宽度=左边框+左内边距+width+右内边距+右边框高度=上边框+上内边距+height+下内边距+下边框元素空间的宽度和高度：宽度=左外边距+左边框+左内边距+width+右内边距+右边框+右外边距高度=上外边距+上边框+上内边距+height

qq_48858031的博客 942

基于RK3588与FPGA的SDI视频处理系统：从MIPI CSI-2输入到DSI输出的全链路解析

本文深入解析了基于RK3588与FPGA的SDI视频处理系统全链路。系统利用FPGA作为高速接口转换与流管理核心，将SDI信号转换为MIPI CSI-2数据流送入RK3588进行智能图像处理与AI分析，处理结果再通过MIPI DSI回传，最终由FPGA控制编码为SDI输出，实现了专业视频接口与强大算力的高效协同。

s1t2u3的博客 666

padding使width增大

1.如果一个div不设置width而设置padding时，div会内缩。 2.如果一个div设置了width和padding就会使得width增大。解决：用js来减少它的width再设置padding $(document).ready(function() { var width=parseInt($("#a").width()); $("#a").width(width-

For The Future 3478

GameFramework框架详解之 DataTable配置表模块

一.前言： DataTable模块是项目的配置表模块，配置表一般是从excel导出csv/json/xml格式的，之所以是excel作为源文件，原因是因为策划同学使用配表最方便。然后一键导出到项目中，除了csv/json/xml配置文件外，一般还会伴随着导出配置的实体类，这样研发同学就可以使用了。GameFramework的DataTable模块也是秉持着这种一贯的策略来实现的。二.DataRow DataRow在excel数据表中，对应的是一行数据，而在代码中对应的其实就是一条数据对象。接口IData

TxNet 4724

AttributeError: module ‘lib‘ has no attribute ‘X509_V_FLAG_CB_ISSUER_CHECK‘解决方案

本文主要介绍了AttributeError: module ‘lib’ has no attribute 'X509_V_FLAG_CB_ISSUER_CHECK’解决方案，希望能对使用python的同学们有所帮助。文章目录 1. 问题描述 2. 解决方案

weixin_43178406的博客 5万+

前端开发中padding与边框是否包含进height和width的情况

在网页排版时经常会遇到padding或边框有时会包含在height或width里有时又不包含的情况。那么什么时候会包含，什么时候又不包含呢？首先，任何情况下margin都不包含在height和width内。而padding与边框是否包含则有两种情况。第一种情况：在标准盒子模型中第二种情况： css3里有一个属性box-sizing

hepcwl的专栏 2万+

PCL 使用点云创建数字高程模型DEM【2025最新版】

使用点云创建数字高程模型DEM，并将结果保存为高程图像。博客长期更新，本文最近更新时间为：2025年9月15日。

点云侠的博客 2294

padding和margin的区别

css盒子模型padding和margin的区别: padding是内边距,会影响我们在浏览器中看到的元素的实际大小,内边距会让元素的内容增大，和其他元素没有关系! margin是外边距,不会影响我们在浏览器中看到的元素的实际大小,外边距不会让元素的内容增大，是和另一个元素的间距 ...

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版【x86|x64】

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能：商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传，基本资料下载，开钱箱、小票打印、收款结算，支持多币种付款方式（现金、储值卡、礼券、微信等）,支持多种促销。运行环境：.net 4.0登陆信息用户名:1001 密码:123456内置商品信息，商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏相关源码待公开

padding不会撑开盒子的情况

1.如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小 2.代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic

qq_46416934的博客 985

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0，兼容Win7/Win10/WinXP，解压就可用。

元素的padding值使元素整体扩大

问题：元素的padding值设定会使元素的整体扩大解决：给元素添加box-sizing:border-box;

liona_koukou的博客 1310

霍尼韦尔SoftMaster使用说明

内边距（padding）和外边距（margin）的区别

内边距（padding）和外边距（margin）的区别。

qiaomm的个人博客 1673

给div加上padding和border，如何不让div整体改变

最近要入门H5,遇到很多困惑，所以，每解决一个，我就要写在博客里，以防忘记！给div加上padding和border，如何不让div整体改变？如果想要实现这样的效果，只需要在这个div块中写入 box-sizing:border-box; CSS3 box-sizing属性有3个值 1 : content-box; 我想这个值就是一般浏览器的默认的，div...

dianshanban9429的博客 669

css将一行的行距拉高

如果不使用padding，仅仅使用line的高度，也是可以将一行拉高的，不过在放大缩小时，这招就不管用了，因此可以考虑还是使用padding这一招喽。 <p style="line-height:80px">this is a normal pad.</p> 使用margin样式实现上下2个盒子间距。Margin呈现是位于对象边框外侧，紧贴于边框，margin与p...

tjzzy的专栏 386

css 27.为什么需要盒模型 28.问什么需要盒模型下 29.布局练习 30.css属性的简写

27.为什么需要盒模型？ “margin: 0;” 表示将元素边距等于0 maigin-top/bottom/left/right：10px; 上/下/左/右边距为10px 如何使三个图片居中？ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margi

ayj1997的博客 241

【自学CSS笔记第8篇】——CSS盒子模型（这一篇就够了）

盒子模型及内减模式简单介绍

m0_64231944的博客 362

box-sizing属性

我们都知道，设置元素的padding或者margin属性时都会改变元素的width和height，传统的方法是将padding和margin的值考虑进去，运用数学的方法进行计算来加以调整，以便使布局不至于改变，但现在box-sizing 属性，可以在使用padding或margin属性时不改变元素的大小，下面使用例子加以说明： eg：传统情况下： HTML代码： CSS代码： ...

weixin_34418883的博客 97

css-盒子模型border-box

不写的情况下，盒子的box-sizing属性值默认是: content-box; box-sizing: content-box; - - - 计算盒子大小 = 盒子的width + 内边距padding + 盒子边框border 所以普通盒子设置一定的宽度width后，再增加padding或border会使盒子变大，但我们经常不需要盒子被撑大，希望改变padding或border后，盒子大小不变。此时可以设置： box-sizing: border-box; - - - 盒子大小 = 盒子的width

qq_39111074的博客 2677

CSS3的盒子模型

<!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>Do.

qq_59717525的博客 122

CSS的盒模型

盒模型(盒子模型/框模型)[box model] CSS将页面中的所有元素都设置为了一个矩形的盒子将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置每一个盒子都由以下几个部分组成: 内容区(content) 内边距(padding) 外边距(margin) 内容区(content): 元素中的所有子元素和文本内容都在内容区中排列内容区的大小由width和height两个属性来设置 width设置内容区的宽度【只设置内容区的】 height设置内...

m0_67176957的博客 157

前端Html5(11)

1.盒模型-边框  <style type="text/css"> div{ width: 200px; height: 200px; background: red; /* 会撑大盒子内填充用于文字等内容距离边界之间的距离 */ padding:50px; /* 边框会撑大盒子*/ border:20px solid #000; /* 边框的注意事项块状元素可以设置上下左右边框但是行内元素只能设置左右边框 */

weixin_64909133的博客 382

上一篇：【JQuery】onload和Jquery初次加载对比

下一篇：【JS】jquery.tmpl.js模板引擎

表格数据学习的图神经网络综述

qq_41009600的博客

11-11

799