行內塊元素被推到下一行

Question

我正在構建一個WordPress主題（被WP SE告知這裏帶來這個問題），但是我的頁腳小部件區域有問題。除了Recent Posts窗口部件之外，所有的窗口部件似乎都可以用我的CSS進行正確佈局。它似乎是前一個元素的邊際權利的兩倍。

小部件的大小爲其容器的33％。我給每行三個小部件的前兩個右邊距爲0.5％（33 * 3 + 0.5 * 2 = 100），並使用第n個小孩選擇器給每個第三個小部件0右邊距。

這對於大多數小部件來說都很漂亮，正如您可以在活動網站的第一行中看到的那樣。在第二行中，我包含了Recent Posts小部件作爲第二個元素。這在前面元素的右邊引入了額外的餘量。

您可以看到，Chrome開發工具無法考慮這個額外的保證金。我在這些屏幕截圖中突出顯示了它以及前面的元素，以顯示它們的利潤率。

Preceding widget http://dl.dropboxusercontent.com/s/2l6dui7f0zrg9ru/2013-07-11%20at%208.49%20AM.png Recent Posts widget http://dl.dropboxusercontent.com/s/s3okkwwgjma4y09/2013-07-11%20at%208.59%20AM.png

誰能告訴我什麼，我可能需要做什麼來解決這個問題？這會將「最近的帖子」小部件之後的小部件推送到下一行，並造成很大的混亂。

如果您想查看問題，請轉至http://www.kellyshipe.com/。您還會看到，上面的行對於不同的小部件是完美的。

Answer 1

inline formatting context中的元素將佔用HTML中的回車符和空格的額外空間。您可以簡單地刪除空白區域（無論哪個元素都是內嵌區塊，例如.widget），或者您也可以將小部件浮動起來，這樣您就不必亂用標記了。

Answer 2

您需要在下面的關閉部分標記和開始部分標記之間去掉html中的空白（將其刪除或註釋掉）。

</section>  <section id="recent-posts-2" class="widget widget_recent_entries">