Question

我已经尝试了一段时间来理解为什么这段代码没有按预期工作。

以下代码应显示白色条纹，绿色条纹，白色条纹，无间隙。

容器内有三个div，所有2个div都是20％宽度，一个是60％宽度，边框，填充，边距是0。

问题是为什么我仍然会在白色和绿色块之间看到＆＃34; margin＆＃34;？

如果你想尝试一下

https://jsbin.com/lexekimoba/edit?html,css,output

＆＃13;

* {
  margin: 0;
  padding: 0;
  border: 0px solid red;
}

body {
  background-color: #888;
}

.container1 {
  background-color: #aaa;
}

.main {
  width: 60%;
  background-color: green;
  display: inline-block;
  box-sizing: border-box;
}

.side {
  box-sizing: border-box;
  width: 20%;
  display: inline-block;
  background-color: white;
}

＆＃13;

<div class="container1">
  <div class="side">s</div>
  <div class="main">
    abcdef
  </div>
  <div class="side">s</div>
</div>

＆＃13;

Answer 1

两个内联div之间的空白区域相当可见。

尝试删除内联div之间的所有空格。

为了更好的解释，请阅读css-tricks的这篇精彩文章

Fighting the Space Between Inline Block Elements

这是交易：一系列像你一样格式化的内联块元素通常格式HTML将在它们之间有空格。

另外，您可能需要阅读Remove Whitespace Between Inline-Block Elements

Answer 2

删除div之间的空白区域

*{	
	margin: 0;
	padding: 0;
	border: 0px solid red;		
}


body{
	background-color: #888;
	
}

.container1{	
	background-color: #aaa;
	
}

.main{
	width: 60%;
	background-color: green;
	display: inline-block;
	box-sizing: border-box;	
	
}

.side{
    box-sizing: border-box;
	width: 20%;
	display: inline-block;
	background-color: white;
		
}

<!DOCTYPE html>
<html>
	<head>
		<title>div align</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
		<link rel="stylesheet" type="text/css" href="divalign.css">
	</head>
	<body>

		<div class="container1">
          <div class="side">s</div><div class="main">
			  abcdef	
			</div><div class="side">s</div>
          
		</div>


	</body>
</html>

或在内联块元素之间使用。

*{	
	margin: 0;
	padding: 0;
	border: 0px solid red;		
}


body{
	background-color: #888;
	
}

.container1{	
	background-color: #aaa;
	
}

.main{
	width: 60%;
	background-color: green;
	display: inline-block;
	box-sizing: border-box;	
	
}

.side{
    box-sizing: border-box;
	width: 20%;
	display: inline-block;
	background-color: white;
		
}

<!DOCTYPE html>
<html>
	<head>
		<title>div align</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
		<link rel="stylesheet" type="text/css" href="divalign.css">
	</head>
	<body>

		<div class="container1">
          <div class="side">s</div><!--
			--><div class="main">
			  abcdef				
			</div><!-- 
          
          --><div class="side">s</div><!--
          
		--></div>


	</body>
</html>

您可以阅读更多相关信息here

Answer 3

这是由于DIV之间的换行符（在HTML代码中）。如果删除它们，它可以工作：

* {
  margin: 0;
  padding: 0;
  border: 0px solid red;
}

body {
  background-color: #888;
}

.container1 {
  background-color: #aaa;
}

.main {
  width: 60%;
  background-color: green;
  display: inline-block;
  box-sizing: border-box;
}

.side {
  box-sizing: border-box;
  width: 20%;
  display: inline-block;
  background-color: white;
}

<div class="container1">
  <div class="side">s</div><div class="main">
    abcdef
  </div><div class="side">s</div>
</div>

div元素和显示内联块

3 个答案: