亚洲中文字幕无码永久免弗 ,国产精品第一二三区久久蜜芽,亚洲免费a在线观看

前言如果兩個(gè)或多個(gè)元素很接近，那么用戶就會(huì)認(rèn)為它們以某種方式屬于彼此。當(dāng)對(duì)多個(gè)設(shè)計(jì)元素進(jìn)行分組時(shí)，用戶可以根據(jù)它們之間的空間大小來決定它們之間的關(guān)系。沒有間距，用戶將很難瀏覽頁面并知道哪些內(nèi)容相關(guān)而哪些內(nèi)容無關(guān) 。
在本文中，我將介紹有關(guān)CSS中的間距，實(shí)現(xiàn)此間距的不同方法以及何時(shí)使用 padding 或 margin 所需的所有知識(shí) 。
更多的CSS知識(shí)點(diǎn)實(shí)踐相關(guān)文章，請(qǐng)見本篇文章底部
間距類型CSS中的間距有兩種類型，一種在元素外部，另一種在元素內(nèi)部。對(duì)于本文，我將其稱為outer和inner 。假設(shè)我們有一個(gè)元素，它內(nèi)部的間距是inner，外部的間距是outer 。

文章插圖
在CSS中，間距可以如下：
.element {padding: 1rem;margin-bottom: 1rem;}我使用 padding 來填充內(nèi)部間距，使用 margin 來填充外部間距。很簡單，不是嗎？但是，當(dāng)處理具有許多細(xì)節(jié)和子元素的組件時(shí)，這會(huì)變得越來越復(fù)雜。
margin 外部間距它用于增加元素之間的間距。例如，在上一個(gè)示例中，我添加了 margin-bottom:1rem 在兩個(gè)堆疊的元素之間添加垂直間距。
由于可以沿四個(gè)不同的方向（top、right、 bottom、left）添加margin ，因此在深入研究示例和用例之前，一定要闡明一些基本概念，這一點(diǎn)很重要。
margin 折疊簡而言之，當(dāng)兩個(gè)垂直元素具有margin，并且其中一個(gè)元素的margin大于另一個(gè)元素時(shí) ，發(fā)生邊距折疊。在這種情況下，將使用更大的margin，而另一個(gè)將被忽略。

文章插圖
在上面的模型中，一個(gè)元素有 margin-bottom，另一個(gè)元素有 margin-top，邊距較大的元素獲勝。
為避免此類問題，建議按照本文使用單向邊距。此外，CSS Tricks還在頁邊距底部和頁邊距頂部之間進(jìn)行了投票。61%的開發(fā)者更喜歡 margin-bottom 而不是 margin-top 。
請(qǐng)?jiān)谙旅娌榭慈绾谓鉀Q此問題：
.element:not(:last-child) {margin-bottom: 1rem;}使用 :not CSS選擇器，您可以輕松地刪除最后一個(gè)子元素的邊距，以避免不必要的間距。
另一個(gè)與邊距折疊相關(guān)的例子是子節(jié)點(diǎn)和父節(jié)點(diǎn) 。讓我們假設(shè)如下:
<div class="parent"><div class="child">I'm the child element</div></div>.parent {margin: 50px auto 0 auto;width: 400px;height: 120px;}.child {margin: 50px 0;}

文章插圖
請(qǐng)注意，子元素固定在其父元素的頂部。那是因?yàn)樗倪吘嗾郫B了。根據(jù)W3C，以下是針對(duì)該問題的一些解決方案：

在父元素上添加 border
將子元素顯示更改為 inline-block

一個(gè)更直接的解決方案是將 padding-top 添加到父元素。

文章插圖
負(fù)margin它可以與四個(gè)方向一起使用以留出余量，在某些用例中非常有用。讓我們假設(shè)以下內(nèi)容：

文章插圖
父節(jié)點(diǎn)具有 padding:1rem，這導(dǎo)致子節(jié)點(diǎn)從頂部、左側(cè)和右側(cè)偏移。但是，子元素應(yīng)該緊貼其父元素的邊緣。負(fù)margin可以助你一臂之力。
.parent {padding: 1rem}.child {margin-left: -1rem;margin-right: -1rem;margin-top: -1rem;}如果您想更多地挖負(fù)margin，建議閱讀這篇文章。
padding 內(nèi)部間距如前所述，padding在元素內(nèi)部增加了一個(gè)內(nèi)間距。它的目標(biāo)可以根據(jù)使用的情況而變化。
例如，它可以用于增加鏈接之間的間距，這將導(dǎo)致鏈接的可點(diǎn)擊區(qū)域更大。

文章插圖
必須提出的是，垂直方向的padding對(duì)于那些具有 display:inline 的元素不適用，比如 <span> 或 <a> 。如果添加了內(nèi)邊距，它不會(huì)影響元素，內(nèi)邊距將覆蓋其他內(nèi)聯(lián)元素。
這只是一個(gè)友好的提醒，應(yīng)該更改內(nèi)聯(lián)元素的 display 屬性。
.element span {display: inline-block;padding-top: 1rem;padding-bottom: 1rem;}CSS Grid 間隙在CSS網(wǎng)格中，可以使用 grid-gap 屬性輕松在列和行之間添加間距。這是行和列間距的簡寫。

文章插圖
.element {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 16px; /* 為行和列都增加了16px的間隙。*/}gap屬性可以使用如下:
.element {display: grid;grid-template-columns: 1fr 1fr;grid-row-gap: 24px;grid-column-gap: 16px;}CSS Flexbox 間隙gap 是一個(gè)提議的屬性，將用于CSS Grid和flexbox，撰寫本文時(shí)，它僅在Firefox中受支持。
.element {display: flex;flex-wrap: wrap;gap: 16px;}CSS 定位它可能不是直接的元素間距方式，但在一些設(shè)計(jì)案例中卻起到了一定的作用。例如，一個(gè)絕對(duì)定位的元素需要從其父元素的左邊緣和上邊緣定位 16px 。
考慮以下示例，帶有圖標(biāo)的卡片，其圖標(biāo)應(yīng)與其父對(duì)象的左上邊緣隔開。在這種情況下，將使用以下CSS：
.category {position: absolute;left: 16px;top: 16px;}

文章插圖
用例和實(shí)際示例在這一節(jié)中，你將回顧一下在日常工作中，你在處理CSS項(xiàng)目時(shí)，會(huì)遇到的不同用例。
header 組件

文章插圖
在這種情況下，標(biāo)題具有l(wèi)ogo，導(dǎo)航和用戶個(gè)人資料。你能猜出CSS中的間距應(yīng)該如何設(shè)置嗎？好吧，讓我為你添加一個(gè)骨架模型。

<header class="c-header"><h1 class="c-logo"><a >Logo</a></h1><div class="c-header__nav"><nav class="c-nav"><ul><li><a >...</a></li></ul></nav><a  class="c-user"><span>Ahmad</span><img class="c-avatar" src="http://www.wokk.cn/shadeed.jpg" ></a></div></header>

文章插圖
Header的左側(cè)和右側(cè)都有padding，這樣做的目的是防止內(nèi)容物緊貼在邊緣上。
.c-header {padding-left: 16px;padding-right: 16px;}對(duì)于導(dǎo)航，每個(gè)鏈接在垂直和水平側(cè)均應(yīng)具有足夠的填充，因此其可單擊區(qū)域可以很大，這將增強(qiáng)可訪問性。
.c-nav a {display: block;padding: 16px 8px;}對(duì)于每個(gè)項(xiàng)目之間的間距，您可以使用 margin 或?qū)?<li> 的 display 更改為 inline-block 。內(nèi)聯(lián)塊元素在它的兄弟元素之間添加了一點(diǎn)空間，因?yàn)樗鼘⒃匾暈樽址?。
.c-nav li {/* 這將創(chuàng)建你在骨架中看到的間距 */display: inline-block;}最后，頭像（avatar）和用戶名的左側(cè)有一個(gè)空白。
.c-user img,.c-user span {margin-left: 10px;}請(qǐng)注意，如果你要構(gòu)建多語言網(wǎng)站，建議使用如下所示的CSS邏輯屬性。
.c-user img,.c-user span {margin-inline-start: 1rem;}

文章插圖
請(qǐng)注意，分隔符周圍的間距現(xiàn)在相等，原因是導(dǎo)航項(xiàng)沒有特定的寬度，而是具有padding 。結(jié)果，導(dǎo)航項(xiàng)目的寬度基于其內(nèi)容。以下是解決方案：

設(shè)置導(dǎo)航項(xiàng)目的最小寬度
增加水平padding
在分隔符的左側(cè)添加一個(gè)額外的margin

最簡單，更好的解決方案是第三個(gè)解決方案，即添加 margin-left 。
.c-user {margin-left: 8px;}網(wǎng)格系統(tǒng)中的間距：Flexbox網(wǎng)格是間隔最常用的情況之一 ?？紤]以下示例：

文章插圖
間距應(yīng)在列和行之間 ?？紤]以下HTML標(biāo)記：

<div class="wrapper"><div class="grid grid--4"><div class="grid__item"><article class="card"><!-- Card content --></article></div><div class="grid__item"><article class="card"><!-- Card content --></article></div><!-- And so on.. --></div></div>

通常，我更喜歡將組件封裝起來，并避免給它們?cè)黾舆吘?。由于這個(gè)原因，我有 grid__item元素，我的card組件將位于其中。
.grid--4 {display: flex;flex-wrap: wrap;}.grid__item {flex-basis: 25%;margin-bottom: 16px;}使用上述CSS，每行將有四張卡片。這是在它們之間添加空格的一種可能的解決方案：
.grid__item {flex-basis: calc(25% - 10px);margin-left: 10px;margin-bottom: 16px;}通過使用CSS calc() 函數(shù)，可以從 flex-basis 中扣除邊距。如你所見，這個(gè)方案并不是那么簡單。我比較喜歡的是下面這個(gè)辦法。

向網(wǎng)格項(xiàng)目添加 padding-left
在網(wǎng)格父節(jié)點(diǎn)上增加一個(gè)負(fù)值 margin-left，其 padding-left 值相同。

幾年前，我從CSS Wizardy那里學(xué)到了上述解決方案（我忘記了文章標(biāo)題，如果您知道，請(qǐng)告訴我）。

.grid--4 {display: flex;flex-wrap: wrap;margin-left: -10px;}.grid__item {flex-basis: 25%;padding-left: 10px;margin-bottom: 16px;}

我之所以用了負(fù) margin-left，是因?yàn)榈谝粡埧ㄓ?padding-left ，而實(shí)際上不需要。所以，它將把 .wrapper 元素推到左邊，取消那個(gè)不需要的空間。
另一個(gè)類似的概念是在兩邊都添加填充，然后邊距為負(fù) 。這是Facebook故事的一個(gè)示例：

文章插圖
.wrapper {margin-left: -4px;margin-right: -4px;}.story {padding-left: 4px;padding-right: 4px;}網(wǎng)格系統(tǒng)中的間距：CSS Grid現(xiàn)在，到了激動(dòng)人心的部分！使用CSS Grid，你可以很容易地使用 grid-gap 添加間距。此外，你不需要關(guān)心網(wǎng)格項(xiàng)的寬度或底部空白， CSS Grid 為你做這一切！
.grid--4 {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-gap: 1rem;}就是這樣！難道不是那么容易和直接嗎？
按需定制我真正喜歡CSS Grid 的地方是 grid-gap 只在需要的時(shí)候才會(huì)被應(yīng)用。考慮下面的模型。

文章插圖
沒有CSS網(wǎng)格，就不可能擁有這種靈活性。首先，請(qǐng)參見以下內(nèi)容：

.card:not(:last-child) {margin-bottom: 16px;}@media (min-width: 700px) {.card:not(:last-child) {margin-bottom: 0;margin-left: 1rem;}}

不舒服吧？這個(gè)如何？

.card-wrapper {display: grid;grid-template-columns: 1fr;grid-gap: 1rem;}@media (min-width: 700px) {.card-wrapper {grid-template-columns: 1fr 1fr;}}

完成了！容易得多。
處理底部margin假設(shè)以下組件堆疊在一起，每個(gè)組件都有底邊距。

文章插圖
注意最后一個(gè)元素有一個(gè)空白，這是不正確的，因?yàn)檫吘嘀荒茉谠刂g 。
可以使用以下解決方案之一解決此問題：
解決方案1-CSS :not 選擇器
.element:not(:last-child) {margin-bottom: 16px;}解決方案2：相鄰兄弟組合器
.element + .element {margin-top: 16px;}雖然解決方案1具有吸引力，但它具有以下缺點(diǎn)：

它會(huì)導(dǎo)致CSS的特異性問題。在使用 :not 選擇器之前不可能覆蓋它。
萬一設(shè)計(jì)中有不止一列，它將無法正常工作。參見下圖。

文章插圖
關(guān)于解決方案2，它沒有CSS特異性問題。但是，它只能處理一個(gè)列棧。
更好的解決方案是通過向父元素添加負(fù)邊距來取消不需要的間距。
.wrapper {margin-bottom: -16px;}它用一個(gè)等于底部間距的值將元素推到底部。注意不要超過邊距值，因?yàn)樗鼤?huì)與同級(jí)元素重疊。
Card組件Oh，如果我想把所有細(xì)節(jié)的Card組件間距都寫進(jìn)去的話，最后可能會(huì)出現(xiàn)書本上的內(nèi)容。我就突出一個(gè)大概的模式，看看間距應(yīng)該如何應(yīng)用。

文章插圖
你能想到此卡片在哪里使用間距嗎？參見下圖。

文章插圖

<article class="card"><a ><div class="card__thumb"><img src="http://www.wokk.cn/food.jpg" ></div><div class="card__content"><h3 class="card__title">Cinnamon Rolls</h3><p class="card__author">Chef Ahmad</p><div class="card__rating"><span>4.9</span></div><div class="card__meta"><!-- --></div></div></a></article>

.card__content {padding: 10px;}上面的 padding 將向其中的所有子元素添加一個(gè)偏移量。然后，我將添加所有邊距。
.card__title,.card__author,.card__rating {margin-bottom: 10px;}對(duì)于評(píng)分和 .car__meta 元素之間的分隔線，我將添加它作為邊框。
.card__meta {padding-top: 10px;border-top: 1px solid #e9e9e9;}糟糕！由于對(duì)父元素 .card__content 進(jìn)行了填充，因此邊框沒有粘在邊緣上。

文章插圖
是的，你猜對(duì)了！負(fù)邊距是解決辦法。
.card__meta {padding-top: 10px;border-top: 1px solid #e9e9e9;margin: 0 -10px;}糟糕，再次！出了點(diǎn)問題。內(nèi)容站在邊緣！

文章插圖
為了解決這個(gè)問題，內(nèi)容應(yīng)該從左右兩邊加點(diǎn)（呵呵，看來加點(diǎn)是個(gè)新詞）。
.card__meta {padding: 10px 10px 0 10px;border-top: 1px solid #e9e9e9;margin: 0 -10px;}

文章插圖
文章內(nèi)容我相信這是一個(gè)非常非常普遍的用例。由于文章內(nèi)容來自CMS（內(nèi)容管理系統(tǒng)），或者是由Markdown文件自動(dòng)生成的，因此無法為元素添加類。
考慮下面的示例，其中包含標(biāo)題，段落和圖像。

<div class="wrapper"><h1>Spacing Elements in CSS</h1><p><!-- content --></p><h2>Types of Spacing</h2><img src="http://www.wokk.cn/spacing-1.png" ><p><!-- content --></p><p><!-- content --></p><h2>Use Cases</h2><p><!-- content --></p><h3>Card Component</h3><img src="http://www.wokk.cn/use-case-card-2.png" ></div>

為了使它們看起來不錯(cuò) ，間距應(yīng)保持一致并謹(jǐn)慎使用。我從type-scale.com借了一些樣式。
h1, h2, h3, h4, h5 {margin: 2.75rem 0 1.05rem;}h1 {margin-top: 0;}img {margin-bottom: 0.5rem;}

文章插圖
如果一個(gè) <p> 后面有一個(gè)標(biāo)題，例如“Types of Spacing”，那么 <p> 的 margin-bottom 將被忽略。你猜到了，那是因?yàn)轫撨吘嗾郫B 。
Just In Case Margin我喜歡把這個(gè)叫做 “Just in case” margin，因?yàn)檫@就是字面意思 ?？紤]一下下面的模型圖。

文章插圖
當(dāng)元素靠近的時(shí)候，它們看起來并不好看。我是用flexbox搭建的。這項(xiàng)技術(shù)稱為“對(duì)齊移位包裝”，我從CSS Tricks中學(xué)到了它的名稱。
.element {display: flex;flex-wrap: wrap;}當(dāng)視口尺寸較小時(shí)，它們的確以新行結(jié)尾。見下文：

文章插圖
需要解決的是中間設(shè)計(jì)狀態(tài)，即兩件物品仍然相鄰，但兩件物品之間的間距為零的設(shè)計(jì)狀態(tài) 。在這種情況下，我傾向于向元素添加一個(gè) margin-right，這樣可以防止它們相互接觸，從而加快 flex-wrap 的工作速度。

文章插圖
CSS 書寫模式根據(jù)MDN：

writing-mode CSS屬性設(shè)置了文本行是水平還是垂直排列，以及塊的前進(jìn)方向。

你是否曾經(jīng)考慮過將邊距與具有不同 writing-mode 的元素一起使用時(shí)應(yīng)如何表現(xiàn)？考慮以下示例。

文章插圖

.wrapper {/* 使標(biāo)題和食譜在同一行 */display: flex;}.title {writing-mode: vertical-lr;margin-right: 16px;}

標(biāo)題被旋轉(zhuǎn)了90度，在它和圖像之間應(yīng)該有一個(gè)空白區(qū) 。結(jié)果表明，基于 writing-mode 的頁邊距工作得非常好。
我認(rèn)為這些用例就足夠了。讓我們繼續(xù)一些有趣的概念！
組件封裝大型設(shè)計(jì)系統(tǒng)包含許多組件。向其直接添加邊距是否合乎邏輯？
考慮以下示例。

文章插圖
<button class="button">Save Changes</button><button class="button button-outline">Discard</button>按鈕之間的間距應(yīng)在哪里添加？是否應(yīng)將其添加到左側(cè)或右側(cè)按鈕？也許你可以如下使用相鄰?fù)?jí)選擇器：
.button + .button {margin-left: 1rem;}這是不好的。如果只有一個(gè)按鈕的情況怎么辦？或者，當(dāng)它垂直堆疊時(shí)在移動(dòng)設(shè)備上將如何工作？很多很多的復(fù)雜性。
使用抽象組件解決上述問題的一種方法是使用抽象的組件，其目標(biāo)是托管其他組件，就像Max Stoiber所說的那樣，這是將管理邊距的責(zé)任移到了父元素上，讓我們以這種思維方式重新思考以前的用例。

文章插圖

<div class="list"><div class="list__item"><button class="button">Save Changes</button></div><div class="list__item"><button class="button button-outline">Discard</button></div></div>

【html用css設(shè)置詞間距 css間距怎么設(shè)置】注意，我添加了一個(gè)包裝器，并且每個(gè)按鈕現(xiàn)在都包裝在其自己的元素中。

.list {display: flex;align-items: center;margin-left: -1rem; /* 取消第一個(gè)元素的左空白 */}.list__item {margin-left: 1rem;}

就是這樣！而且，將這些概念應(yīng)用到任何JavaScript框架中都相當(dāng)容易。例如：
<List><Button>Save Changes</Button><Button outline>Discard</Button></List>你使用的JavaScript工具應(yīng)該將每個(gè)項(xiàng)包裝在自己的元素中。
間隔組件是的，你沒看錯(cuò) 。我在這篇文章中討論了避免margin的概念，并使用間隔組件來代替它們。
讓我們假設(shè)一個(gè)區(qū)域需要從左到右24px的空白，并記住這些限制：

margin不能直接用于組件，因?yàn)樗且粋€(gè)已經(jīng)構(gòu)建的設(shè)計(jì)系統(tǒng) 。
它應(yīng)該是靈活的。間距可能在X頁上，但不在Y頁上。

我在檢查Facebook的新設(shè)計(jì)CSS時(shí)首先注意到了這一點(diǎn) 。

文章插圖
那是一個(gè) <div>，內(nèi)聯(lián)樣式寬度：16px，它唯一的作用是在左邊緣和包裝器之間增加一個(gè)空白空間。
引述這本React游戲手冊(cè)中的內(nèi)容。

但在現(xiàn)實(shí)世界中，我們確實(shí)需要組件之外的間距來合成頁面和場(chǎng)景，這就是margin滲入組件代碼的地方：用于組件的間距組合。

我同意。對(duì)于大型設(shè)計(jì)系統(tǒng)，不斷向組件添加margin是不可伸縮的。這將最終導(dǎo)致一個(gè)令人毛骨悚然的代碼。
間隔組件的挑戰(zhàn)現(xiàn)在你了解了間隔組件的概念，讓我們深入研究使用它們時(shí)遇到的一些挑戰(zhàn) 。這是我想到的一些問題：

間隔組件如何在父級(jí)內(nèi)部取其寬度或高度？在水平布局和垂直布局中，它將如何工作？
我們是否應(yīng)該根據(jù)其父項(xiàng)的顯示類型（Flex ， Grid）對(duì)它們進(jìn)行樣式設(shè)置

讓我們一一解決上述問題。
調(diào)整間隔組件的大小可以創(chuàng)建一個(gè)接受不同變化和設(shè)置的間隔。我不是JavaScript開發(fā)人員，但我認(rèn)為他們將其稱為Props ?？紤]來自styled-system.com的以下內(nèi)容：
我們?cè)谝粋€(gè)header和一個(gè) section之間有一個(gè)隔板。
<Header /><Spacer mb={4} /><Section />雖然這個(gè)有點(diǎn)不一樣，一個(gè)間隔器在logo和導(dǎo)航之間建立一個(gè)自動(dòng)間隔。
<Flex><Logo /><Spacer m="auto" /><Link>Beep</Link><Link>Boop</Link></Flex>你可能會(huì)認(rèn)為，通過添加
justify-content:space-between，使用CSS做到這一點(diǎn)相當(dāng)容易。
如果設(shè)計(jì)上需要改一下怎么辦？那么，如果是這樣的話，樣式就應(yīng)該改了。
見下文，你看到那里的靈活性了嗎？
<Flex><Logo /><Link>Beep</Link><Link>Boop</Link><Spacer m="auto" /><Link>Boop</Link></Flex>那么，如果是這樣的話，就應(yīng)該改變樣式。你看出來有什么靈活性了嗎？對(duì)于尺寸調(diào)整部分，可以根據(jù)其母體的尺寸調(diào)整間隔的尺寸。
對(duì)于上面的內(nèi)容，也許你可以做一個(gè)叫 grow 的prop，可以計(jì)算成 flex-grow:1 在CSS中。
<Flex><Spacer grow="1" /></Flex>使用偽元素我考慮過的另一個(gè)想法是使用偽元素創(chuàng)建間隔符。
.element:after {content: "";display: block;height: 32px;}也許我們可以選擇通過一個(gè)偽元素而不是一個(gè)單獨(dú)的元素來添加間隔器？例如：

<Header spacer="below" type="pseudo" length="32"><Logo /><Link>Home</Link><Link>About</Link><Link>Contact</Link></Header>

直到今天，我還沒有在項(xiàng)目中使用間隔組件，但是我期待可以使用它們的用例。
CSS數(shù)學(xué)函數(shù)：Min()，Max() ， Clamp()有可能有動(dòng)態(tài)的邊距嗎?例如，根據(jù)視口寬度設(shè)置具有最小值和最大值的空白。答案是肯定的！我們可以。最近，F(xiàn)irefox 75支持CSS數(shù)學(xué)函數(shù)，這意味著根據(jù)CanIUse在所有主流瀏覽器中都支持CSS數(shù)學(xué)函數(shù) 。
讓我們回想一下Grid用例，以了解如何在其中使用動(dòng)態(tài)間距。
.wrapper {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: min(2vmax, 32px);}下面是 min(2vmax，32px) 的意思：使用一個(gè)等于 2vmax 的間隙，但不能超過 32px 。

文章插圖
擁有這樣的靈活性確實(shí)令人驚訝，并且為我們提供了構(gòu)建更多動(dòng)態(tài)和靈活布局的許多可能性。

以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請(qǐng)您及時(shí)就醫(yī)或請(qǐng)專業(yè)人士給予相關(guān)指導(dǎo)!

「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對(duì)您有所幫助：