取消行内块元素的默认边距

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

...

.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;
} ...下同
效果图:
posted @   山下明明子  阅读(757)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示