1. 程式人生 > >去除行內元素之間的間隙

去除行內元素之間的間隙

type 存在 ron tro 個數 left ont 關於 style

當行內元素(此處主要是指inline-block)在一行顯示時,存在默認的行間元素間隙,在布局時可能要去除

技術分享圖片

第一種方法: font-size(在子元素或者父元素上設置都可以,看需求) //適用inline-block元素

<div class="parent" style="font-size: 0;">
        <input type="text">
        <input type="text">
</div>

第二種方法:letter-space(在父元素上設置) //適用inline-block元素 //關於-5px,經測試,只有這個數值剛好重合,或許是個巧合,可自行測試

<div class="parent" style="letter-space:-5px;">
        <input type="text">
        <input type="text">
</div>

第三種方法:word-space(在父元素上設置) //適用inline-block或者inline元素

<div class="parent" style="word-space:-5px;">
        <input type="text">
        <input type="text"
> </div>

第四種方法:float(在子元素上設置) //適用inline-block或者inline元素

<div class="parent">
        <input type="text"  style="float:left;">
        <input type="text"  style="float:left;">
</div>

去除行內元素之間的間隙