Question

我无法将盒子放在容器ID中，但由于某种原因，它们会在右侧保持重叠。我是新手，所以请放轻松我。

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Block-Level</title>
	<style type="text/css">
		#container{
		/* Auto margins used for centering elements horizontally */
		margin-right: auto; 
		margin-left: auto; 
		/* Box dimensions */
		width: 1000px;
		/* Colour of box */
		background-color: #AA4639;
		padding: 5px;
		border-radius: 10px;
		font-size: 0;
		}
		.box1{
			width: 100%;
			height: 200px;
			background-color: #81BBC9;
			border-radius: 10px;
			display: inline-block;
			font-size: 16px;
			margin: 5px;
			padding: 5px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div class="box1"></div>
		<div class="box1"></div>
		<div class="box1"></div>
	</div>
</body>
</html>

＆＃13;

Answer 1

去除边缘，边缘填充但不是顶部/底部。如：

/* vertical | horizontal */
margin: 5px 0;
padding: 5px 0;

参见演示：

#container {
  /* Auto margins used for centering elements horizontally */  
  margin-right: auto;
  margin-left: auto;
  /* Box dimensions */
  width: 500px;
  /* Colour of box */
  background-color: #AA4639;
  padding: 5px;
  border-radius: 10px;
  font-size: 0;
}

.box1 {
  width: 100%;
  height: 200px;
  background-color: #81BBC9;
  border-radius: 10px;
  display: inline-block;
  font-size: 16px;
  margin: 5px 0; /* here */
  padding: 5px 0; /* here */
}

<div id="container">
  <div class="box1"></div>
  <div class="box1"></div>
  <div class="box1"></div>
</div>

Answer 2

这只是因为当你在box1中声明宽度：100％时，宽度变得与你的容器相同！尝试静态指定宽度，或将其更改为小于100％的值，如下所示98％。

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Block-Level</title>
	<style type="text/css">
		#container{
		/* Auto margins used for centering elements horizontally */
		margin-right: auto; 
		margin-left: auto; 
		/* Box dimensions */
		width: 1000px;
		/* Colour of box */
		background-color: #AA4639;
		padding: 5px;
		border-radius: 10px;
		font-size: 0;
		}
		.box1{
			width: 98%;
			height: 200px;
			background-color: #81BBC9;
			border-radius: 10px;
			display: inline-block;
			font-size: 16px;
			margin: 5px;
			padding: 5px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div class="box1"></div>
		<div class="box1"></div>
		<div class="box1"></div>
	</div>
</body>
</html>

＆＃13;

重叠的盒子

2 个答案: