css3基础问题100问之内边距撑大盒子问题？（2）

最新推荐文章于 2023-07-26 10:34:49 发布

㼛思雨

最新推荐文章于 2023-07-26 10:34:49 发布

阅读量834

点赞数 1

分类专栏： css3基础100问文章标签： css3

本文链接：https://blog.csdn.net/weixin_45147894/article/details/106692303

版权

内盒尺寸计算（元素实际大小）

盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

下面进行一个例题的讲解：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算盒子实际的大小</title>
	<style>
		div {
			width: 180px;
			height: 200px;
			background-color: pink;
			/*添加10px 内边距 左右 上下*/
			padding: 10px;
			/*盒子的实际大小 =  内容宽度 高度 +  内边距 +  边框*/
			      /*           =   200  +  20  +  0
			                 =   220  */
             /*解决的方法：
                内边距一定要给的， 我们只能改变 内容宽度 width 让他减去 多出来的内边距就可以了*/
                /*200 - 20  =  180 */
		}
	</style>
</head>
<body>
	<div> </div>
</body>
</html>

上面代码结果盒子的高度为：220px;

padding会撑大盒子大小的：例如下面案例：

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

㼛思雨

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3基础问题100问之内边距撑大盒子问题？（2）

内盒尺寸计算（元素实际大小）盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框下面进行一个例题的讲解：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算盒子实际的大小</title> <style> div { width: 180px; height: 200px; ...
复制链接

扫一扫