什麼是給要素之間的保證金這種形式

請看例子 http://v4-alpha.getbootstrap.com/components/forms/#inline-forms 什麼是給要素之間的保證金這種形式

我看不出是什麼原因造成的form-group和按鍵之間的差距，也是form-group秒之間。當我啓用flexbox使用引導程序4時，我所有的元素（輸入和按鈕）都會在它們之間沒有任何邊距的情況下崩潰。

如何查看導致突出顯示的form-group和旁邊的按鈕？我無法通過鉻檢查員找到它。

謝謝。

來源

2016-07-27 bsr

我們需要的不僅僅是圖像，以幫助更多的，我敢肯定你知道如何提出正確的問題:)，所以請張貼一個最小的工作代碼片段，重現問題 – LGSon

抱歉錯誤的措辭。我的問題是在上面的鏈接（bs4文檔），什麼是造成的空間，我怎麼能通過鉻檢查器看到它。 – bsr

對不起，我的回答認爲你是在詢問名稱輸入框和電子郵件標籤之間的空白區域，但當談到電子郵件文本框和按鈕之間的空間時，答案是一樣的。從html中刪除空格，該按鈕將位於電子郵件文本框旁邊。 –

這是怎麼樣的一個棘手的事情，但它有這意味着它們是內聯格式化上下文的一部分，該兩個div被設置爲display:inline-block的事實做了，每個div都幾乎表現爲如果它是一個句子中的單詞。我們希望單詞之間的空格可以呈現，因此html非常巧妙地暗示了html中的空格應該被渲染爲空格。在Chrome檢查器中，它對元素樹進行格式化的方式隱藏了這一點，但如果您在Chrome檢查器中編輯父元素上的html並刪除空間，則可以重新創建您在我的codepen示例中看到的內容。

下面是一個代碼筆，以證明：http://codepen.io/MarkAtRamp51/pen/XKYNpZ

通知二者之間的差：從HTML顯示的兩個表單組之間的空格

摘錄

<input type="text" class="form-control" id="exampleInputName2" 
placeholder="Jane Doe"> </div> 
<div class="form-group"> 
    <label for="exampleInputEmail2">Email</label>

和

<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> 
    </div><div class="form-group"> 
    <label for="exampleInputEmail2">Email</label>

注意在第二個ex充足的兩個DIV彼此相鄰。

你可以找到關於這個位置的詳細信息： https://css-tricks.com/fighting-the-space-between-inline-block-elements/和 https://www.w3.org/TR/CSS2/visuren.html

來源

2016-07-27 00:49:42

您可以使用.btn刪除按鈕和文本框之間的空白。margin：-4px; }代碼筆示例中的CSS。 – Gary

您也可以這樣做來刪除名稱文本框和電子郵件標籤之間的空格。 –

是.form-control {margin：4px; }將刪除所有的空間 – Gary

什麼是給要素之間的保證金這種形式

回答

相關問題