使用padding的各种属性定义文字在盒子中的位置且不改变盒子的大小，box-sizeing属性

最新推荐文章于 2024-06-23 12:25:57 发布

我的水卡丢了

最新推荐文章于 2024-06-23 12:25:57 发布

阅读量1.3k

点赞数 2

文章标签： html css css3

本文链接：https://blog.csdn.net/m0_61690708/article/details/127070582

版权

padding属性里有五种属性：top、bottom、left、right，还有原属性，分别控制着上下左右对盒子边缘的影响。

但只使用padding时改变的是盒子的外部尺寸造成了文字对盒子边缘的距离的假象，此时就要使用第二个属性了，它就是：box-sizeing：它有两个属性：border-box、content-box可以控制盒子外部尺寸不发生变化且进行控制盒子文字的位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子模型</title>
		<style>
			#mydiv1,#mydiv2{box-sizing: border-box; padding-left:20px;padding-top: 20px; width: 200px;height: 200px;background-color: bisque;}
			#mydiv1{pa margin-top: 20px;margin-bottom: 0px;}
			#mydiv2{margin-top: 50px;margin-left: 0px;}
			/* 上面盒子的下间距和下面盒子的下间距取二者最大的数值显示 */
		</style>
	</head>
	<body>
		<!-- 为了构建盒子需要用宽度和高度画出来，然后加属性(颜色，背景，图片)修饰；
		用相应的属性来控制盒子的位置。 -->
		<div id="mydiv1">div1</div>
		<div id="mydiv2">div2</div>
	</body>
</html>