字體大小更改保證金，爲什麼？

我正在爲移動設備創建側滾動div，並遇到了一個奇怪的問題。如果您運行下面的代碼，將字體大小注釋爲主體樣式，則會在.scroll_item的兩側添加額外的邊距。設置字體大小爲0，它工作得很好。我試圖避免在.scroll_item樣式中設置字體大小，而只是從頁面中的前一個字符繼承。字體大小更改保證金，爲什麼？

爲什麼會發生這種情況，還有其他方法可以在不將字體大小設置爲0的情況下進行更正？

body { 
 
    background-color: gray; 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    /*font-size: 0;*/ 
 
} 
 
#scroll_cont { 
 
    height: auto; 
 
    background-color: red; 
 
    margin: 0; 
 
    padding: 0; 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
} 
 
.scroll_item { 
 
    width: 120px; 
 
    height: 120px; 
 
    padding: 5px; 
 
    margin: 2px; 
 
    background-color: blue; 
 
    box-sizing: border-box; 
 
    white-space: normal; 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    color: white; 
 
}

<html> 
 

 
<head> 
 
    <title>Side Scroll Test</title> 
 
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1, user-scalable=no"> 
 

 
</head> 
 

 
<body> 
 
    <div id="scroll_cont"> 
 
    <div class="scroll_item">Test1</div> 
 
    <div class="scroll_item">Test2</div> 
 
    <div class="scroll_item">Test3</div> 
 
    <div class="scroll_item">Test4</div> 
 
    <div class="scroll_item">Test5</div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-11-05 Paul Neale

怎麼樣'的line-height：1'？ –

這是一個常見的問題開發者有直列塊。內聯塊的行爲有點像塊，有點像內聯。那是什麼意思？那麼一塊是你認爲它現在應該如何行事。然而，內聯意味着它有點像文本。並且通過換行符斷開的兩個內聯元素通常會自動獲得它們之間的空白區域。

例如：

<span>I</span> 
<span>don't</span> 
<span>have</span> 
<span>to</span> 
<span>space</span> 
<span>these!</span>

這將與空格呈現自動即使我不包括任何。有點愚蠢，對吧？但那是怎麼回事。有許多黑客和技巧可以避免這種擔憂。對於應該並排堆疊的內嵌塊元素，一些設置約-4px的邊距右邊。
其他人只會使用不同的顯示類型，如表或flexbox。你也可以嘗試將它們左移，然後向它們添加一個clearfix hack。給我評論，如果你還停留和/或退房克里斯Coyier的實心柱這種兩難局面：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

來源

2016-11-05 16:45:27

一種方法你可能不會喜歡，但將工作是這樣的：

body{ 
 
    background-color: gray; 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    /*font-size: 0;*/ 
 
} 
 
#scroll_cont{ 
 
    height: auto; 
 
    background-color: red; 
 
    margin: 0; 
 
    padding: 0; 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
} 
 
.scroll_item{ 
 
    width:120px; 
 
    height:120px; 
 
    padding: 5px; 
 
    margin: 2px; 
 
    background-color: blue; 
 
    box-sizing:border-box; 
 
    white-space: normal; 
 
    display:inline-block; 
 
    font-size: 20px; 
 
    color:white; 
 
}

<div id="scroll_cont"> 
 
    <div class="scroll_item"> 
 
    Test1</div><div class="scroll_item"> 
 
    Test2</div><div class="scroll_item"> 
 
    Test3</div><div class="scroll_item"> 
 
    Test4</div><div class="scroll_item"> 
 
    Test5</div> 
 
</div>

解釋我在這裏做的是：通過在前一個關閉之後開始下一個div（即沒有換行符空格）我阻止瀏覽器添加不需要的「空白」（它不是'保證金'就像你說的那樣。好吧它是英文的，但不是在CSS裏）

來源

2016-11-05 16:46:43 mizurnix

感謝每一位。沒有完美的解決方案，但我現在只是將字體大小設置爲0位，我會回到它並在我有機會時嘗試其他人。 –

設置父font-size: 0和設置在inline-block兒童所需font-size是去除特性餘量或空白之間內嵌元素的標準方式（inline，inline-block或任何其它直列顯示）。

觀看演示如下：

body { 
 
    background-color: gray; 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 
#scroll_cont { 
 
    height: auto; 
 
    background-color: red; 
 
    margin: 0; 
 
    padding: 0; 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
    font-size: 0; 
 
} 
 
.scroll_item { 
 
    width: 120px; 
 
    height: 120px; 
 
    padding: 5px; 
 
    margin: 2px; 
 
    background-color: blue; 
 
    box-sizing: border-box; 
 
    white-space: normal; 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    color: white; 
 
}

<html> 
 

 
<head> 
 
    <title>Side Scroll Test</title> 
 
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1, user-scalable=no"> 
 

 
</head> 
 

 
<body> 
 
    <div id="scroll_cont"> 
 
    <div class="scroll_item">Test1</div> 
 
    <div class="scroll_item">Test2</div> 
 
    <div class="scroll_item">Test3</div> 
 
    <div class="scroll_item">Test4</div> 
 
    <div class="scroll_item">Test5</div> 
 
    </div> 
 
</body> 
 

 
</html>

另一種方法，是利用評論克服這一空白（當然這個棘手的一點點管理） - 見演示如下：

body { 
 
    background-color: gray; 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 
#scroll_cont { 
 
    height: auto; 
 
    background-color: red; 
 
    margin: 0; 
 
    padding: 0; 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
} 
 
.scroll_item { 
 
    width: 120px; 
 
    height: 120px; 
 
    padding: 5px; 
 
    margin: 2px; 
 
    background-color: blue; 
 
    box-sizing: border-box; 
 
    white-space: normal; 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    color: white; 
 
}

<html> 
 

 
<head> 
 
    <title>Side Scroll Test</title> 
 
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1, user-scalable=no"> 
 

 
</head> 
 

 
<body> 
 
    <div id="scroll_cont"> 
 
    <div class="scroll_item">Test1</div><!-- 
 
    --><div class="scroll_item">Test2</div><!-- 
 
    --><div class="scroll_item">Test3</div><!-- 
 
    --><div class="scroll_item">Test4</div><!-- 
 
    --><div class="scroll_item">Test5</div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-11-05 16:58:09 kukkuz

@PaulNeale讓我知道你對此的反饋，謝謝！ – kukkuz

我在這裏分享2解決方案，它是工作形成我

1）拆下字體大小：從body標籤0，並添加字體大小：在父div標籤0。

2）您也可以使用顯示：柔性財產

#scroll_cont{ 
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+ */ 
}

來源

2016-11-05 17:10:25

字體大小更改保證金，爲什麼？

回答

相關問題