盒子模型中padding 和 border 属性会撑大盒子

最新推荐文章于 2023-06-21 06:45:00 发布

makelucky

最新推荐文章于 2023-06-21 06:45:00 发布

阅读量2.7k

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/makelucky/article/details/89296155

版权

H5 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

如下代码下a、b、c部分的宽高均为100，可是大小却不同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
		    * {
				margin:0;
				padding:0;
			}
			div {
				width:100px;
				height:100px;
				background:green;
			}
			.a {
				height:100px;
				width:100px;
				background:pink;
				border:10px solid green;
			}
			.b {
				height:100px;
				width:100px;
				background:yellow;
				padding:10px;
				
			}
			.c {
				background:red;	
			}
		</style>
	</head>
	<body>
		<div class="c">
		</div>
		<div class="a">
		</div>
		<div class="b">
		</div>
	</body>
</html>

这是为什么呢？我们用浏览器工具调试一下如下

c部分

a部分

b部分

我们发现内容部分没有变化，有变化的是padding和border的值，我们再来想想什么是盒子模型呢？盒子模型包括内边距（padding）、外边距（margin）、边框（border）以及内容。所以说盒子的大小不等于内容的大小，还要加上内边距以及边框的大小。所以当你要加上内边距或者边框的时候，应该减少盒子相应的宽和高。这里注意相减的时候一定要注意左右、上下一起减。比如a部分宽度要减去10*2=20，高度减去10*2=20；修改后代码和运行截图如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
		    * {
				margin:0;
				padding:0;
			}
			div {
				width:100px;
				height:100px;
				background:green;
			}
			.a {
				height:80px;
				width:80px;
				background:pink;
				border:10px solid green;
			}
			.b {
				height:80px;
				width:80px;
				background:yellow;
				padding:10px;
				
			}
			.c {
				background:red;
				
			}
		</style>
	</head>
	<body>
		<div class="c">
		</div>
		<div class="a">
		</div>
		<div class="b">
		</div>
		
	</body>
</html>

makelucky

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
盒子模型中padding 和 border 属性会撑大盒子

如下代码下a、b、c部分的宽高均为100，可是大小却不同<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>练习</title> <style> * { margin:0; padding:0; ...
复制链接

扫一扫