html - 如何收紧行之间的边距？

Question

我试图拉入行之间的空间，负边距适用于左/右边距，但不适用于上/下边距。

.center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rec {
  max-width: 100px;
  max-height: 50px;    
}

#wrapper div {
  display: inline-block;
  padding: .1em;
  border: 1px solid black;
  min-width: 5px;
  min-height: 5px;
  margin: -3px;  
  background-color: white;  
  cursor: default;
}

<section class="rec center" id="wrapper">
  <div></div>
  <div></div>   
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>  
</section>

标签： htmlcss

Answer 1

我float:left在包装类中添加了属性，它成功了

.center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.rec {
  max-width: 100px;
  max-height: 50px; 

}

#wrapper div {
  float:left;
  display: inline-block;
  padding: 0.1em;
  border: 1px solid black;
  min-width: 5px;
  min-height: 5px;
  padding:0.1em;
  background-color: white;  
  cursor: default;
  white-space:0;
}

<section class="rec center" id="wrapper">
  <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>