行内块元素默认有边距,如:

...

.box{
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  border: 5px solid black;
}
</style>
</head>
<body>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</body>
效果图为:
取消行内块元素的默认边距
解决方法:
方案一. 对父元素设置 font-size: 0;
方案二. 对父元素的 word-spacing 设置合理的负值
如:
* {
  font-size: 0;
  /*word-spacing: -10*/   /*具体的值可调试确定,且不同浏览器值不同*/
}
.box{
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  border: 5px solid black;
} ...下同
效果图:
取消行内块元素的默认边距

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-12-31
  • 2021-12-31
  • 2021-07-07
  • 2021-12-28
  • 2021-11-03
  • 2022-02-07
猜你喜欢
  • 2019-09-16
  • 2021-12-13
  • 2022-12-23
  • 2022-12-23
  • 2021-05-14
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案