css---盒子模型---内边距

最新推荐文章于 2023-03-16 21:12:26 发布

chen_zan_yu_

最新推荐文章于 2023-03-16 21:12:26 发布

阅读量400

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.csdn.net/chen_zan_yu_/article/details/89404907

CSS 专栏收录该内容

51 篇文章

订阅专栏

本文深入讲解了CSS盒子模型，包括边框、内边距及如何影响盒子大小等内容区域的细节。通过实例展示了如何使用padding属性调整盒子的内边距，并解释了其对盒子可见宽度和高度的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 100px;
				height: 100px;
				background-color: #bfa;
				/*
				 * 设置边框
				 */
				border:10px red solid;
				
				/*
				 * 内边距，指的是盒子的内容区与盒子边框之间的距离
				 * 一共有四个方向的内边距，可以通过
				 * 		padding-top
				 * 		padding-right
				 * 		padding-left
				 * 		padding-bottom
				 * 		来设置四个方向的内边框
				 * 
				 * 内边距可影响盒子大小，颜色背景也会在内边距出现
				 * 
				 * 	盒子的大小由内容区，内边距和边框共同决定
				 * 	盒子可见框的宽度=border-left-width + padding-left + width + padding-right + border-right-width
				 * 	盒子可见宽的高度=border-width + padding-top + height + padding-bottom + border-bottom-width
				 * 
				 */
				padding-top: 100px;
				padding-right: 100px;
				padding-left: 100px;
				padding-bottom: 100px;
				
				/*
				 * 使用padding可以同时设置四个边框的样式，规则和border-width一样
				 * 
				 * padding:100px;
				 * padding:100px 200px;
				 * padding:100px 200px 300px;
				 * padding:100px 200px 300px 400px;
				 */
			}
			/*
			 * 创建一个子元素box1占满box2
			 */
			.box2{
				width: 100%;
				height: 100%;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">
				
			</div>
		</div>
	</body>
</html>