盒子模型 margin和padding和盒子大小的影响

最新推荐文章于 2022-07-22 19:32:12 发布

原创最新推荐文章于 2022-07-22 19:32:12 发布 · 6.9k 阅读

9 ·

CC 4.0 BY-SA版权

java web前后端专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了CSS中的盒子模型，包括margin(外边距)、padding(内边距)及border(边框)的概念及其对盒子宽度的影响，并通过具体示例展示了如何调整这些属性确保子元素在父容器中正确布局。

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

margin 是盒子的外边距

padding是盒子的内边距

border是盒子的外边框

它们对盒子的宽度是有影响的，下边举一个例子：

首先是html：

<html> <head></head> <style type="text/css"> .div{ width:400px; height:400px; background-color:red; } .div1{ float:left; width:200px; height:200px; background-color:green; } .div2{ float:left; width:200px; height:200px; background-color:blue; } </style> <body> <div class="div"> <div class="div1"></div> <div class="div2"></div> <div> </body>

两个盒子的宽度正好充满父容器：

此时如果把div1 div2分别加上margin：10px 盒子宽度就会加上外边距，宽度超过父容器：

同理，加上padding和border的话也同样增加了盒子宽度，所以要使两个盒子宽度不溢出，div的宽度需要减去所增加的属性宽度：

<html>
<head></head>
<style type="text/css">
 .div{
width:400px;
height:400px;
background-color:red;
}
 .div1{
margin:10px;
float:left;
width:180px;
height:180px;
background-color:green;
}
 .div2{
margin:10px;
float:left;
width:180px;
height:180px;
background-color:blue;
}
</style>
<body>
        <div class="div">
  		<div class="div1"></div>
		<div class="div2"></div>
	
	<div>
</body>
</html>width:180px;
height:180px;
background-color:green;
}
 .div2{
margin:10px;
float:left;
width:180px;
height:180px;
background-color:blue;
}
</style>
<body>
        <div class="div">
  		<div class="div1"></div>
		<div class="div2"></div>
	
	<div>
</body>
</html>