消除Disaplay Inline-Block物件間隙

by wllai2001

HTML

<!--參考自 https://css-tricks.com/fighting-the-space-between-inline-block-elements/-->
<div class='item'>
  <div>欄位</div>
  <div>欄位</div>
  <div>欄位</div>
</div>

<!--標籤拆分法-->
<div class='item'>
  <div>
  欄位</div><div>
  欄位</div><div>
  欄位</div>
</div>

<!--註解拆分法-->
<div class='item'>
     <div>欄位</div><!--
  --><div>欄位</div><!--
  --><div>欄位</div>
</div>

<!--Margin修正法-->
<div class='item marnig'>
     <div>欄位</div>
     <div>欄位</div>
     <div>欄位</div>
</div>

<!--改用display:flex-->
<div class='item flexbox'>
  <div>欄位</div>
  <div>欄位</div>
  <div>欄位</div>
</div>

CSS

.item{
  width:500px;
  margin:20px auto;
  
}
.item > * {
  display:inline-block;
  width:10vw;
  border:1px solid #555;
  text-align:center;  
}

.marnig > * {
  margin-right: -4px;
}

.flexbox {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}