tag教學 - mdn html element




顯示:內聯塊額外保證金 (8)

這個問題在這裡已經有了答案:

我正在使用一些設置為display: inline-block div display: inline-block並且具有設置的heightwidth 。 在HTML中,如果在每個div有換行符,則會在div的右側和底部添加一個自動5px頁邊距。

例:

<div>Some Text</div>
<div>Some Text</div>

是否有一個我忽略的屬性可以讓我重置自動保證金?

更新

根據我的發現,沒有辦法去除邊距......除非你把所有東西都放在同一行上,或者添加註釋來註釋掉換行符。 例:

<div>Some Text</div><!--
--><div>Some Text</div>

不是最好的解決方案,但如果您有多條線路,則仍然更易於閱讀。


div被視為內聯元素。 正如兩個跨度之間的空間或分界線會造成間隙一樣,它會在內聯塊之間進行。 你可以給他們一個負邊距或設置word-spacing: -1; 在周圍的容器上。




你能發布一個鏈接到有問題的HTML嗎?

最終你應該能夠做到:

div {
    margin:0;
    padding: 0;
}

去除間距。 這只是在一個特定的瀏覽器或全部?


另一個解決方案是使用HTML縮小器。 這在Grunt構建過程中效果最佳,HTML可以在飛行中縮小。

額外的換行符和空格被刪除,這可以很好地解決頁邊距問題,並允許您在IDE中編輯標記(無</li><li> )。


對於記錄來說,這個保證金和填充重置對我來說並沒有什麼竅門,但是上面的評論中的這個引用結果是非常重要的,並且為我解決了這個問題:“如果我把div放在同一行上邊際消失“。


清除這些空格的方法是使用float: left;

DEMO

HTML:

<div>Some Text</div>
<div>Some Text</div>

CSS:

div {
    background-color: red;
    float: left;
}

我不支持所有新瀏覽器 。 從來沒有得到它為什麼當IE瀏覽器裁定很多的開發人員沒有起訴他們的網站在firefox / chrome上運行良好,但今天,當IE瀏覽器下降到14.3% 。 反正,在IE-9中沒有很多問題,甚至認為它不被支持,例如上面的演示工作正常。


經過多次與這個問題鬥爭之後,我在HTML 5中發現了一個非常優雅的解決方案。在HTML 5中,您不應該關閉幾個(li,p等)標籤; 成為XML的雄心永遠消失。 例如,執行列表的首選方式是:

<ul>
   <li>
       <a ...>...</a>
   <li>
       <a ...>...</a>
</ul>

瀏覽器必須關閉LI,他們必須在不引入空白的情況下執行此操作,以解決此問題。 如果你仍然有XML思維方式,那就感覺錯了,但是一旦你克服了它,它就會節省許多噩夢。 這不是黑客,因為它依賴於HTML 5規範的措辭。 更好的是,由於不關閉標籤是普遍的我期望沒有兼容性問題(雖然沒有測試)。 獎金是HTML格式化程序處理得很好。

有點成功的例子: http://cssdesk.com/Ls7fKhttp://cssdesk.com/Ls7fK





xhtml