WordPress 中的內邊距 (Padding) 和邊距 (Margin) 之間有什麼變化?

已發表: 2023-08-16


你想知道 WordPress 中 padding 和 margin 的區別嗎?

在 WordPress 中,內邊距是內容和區塊內邊框之間的位置,而邊距是兩個獨立區塊之間的空間。

在這篇文章中,我們將向您介紹涉及填充和邊距的變體以及如何在 WordPress 中使用它們。

Difference between padding and margin in WordPress

WordPress 中的填滿是什麼?

WordPress 網站上的填滿屬性用於在區塊內產生空間。

為了便於說明,您可以增加文字區塊內的位置,使其佈局在視覺上更具吸引力,並防止文字看起來太靠近區塊的邊界。

Padding preview

您也可以使用填充來處理內容在 WordPress 部落格上的流動方式。 例如,如果您在文字區塊的頂部和底部插入填充,則可以使訪客更輕鬆地閱讀書面內容。

WordPress 中的保證金是什麼?

邊距是 WordPress 區塊及其周圍元素的邊界周圍的空間。

這可以幫助您插入包含兩個不同區塊的空間,為您的網站建立更寬敞、更乾淨的佈局。

Margin preview

例如,您可以在文字內容區塊的前導和底部添加邊距,以便即使在調整螢幕大小時它仍然可見。

此外,您還可以使用邊距來增加印象和文字內容區塊之間的位置,以使您的網站在視覺上更具吸引力並且更易於人們訪問。

WordPress 中的 Padding 和 Margin 有什麼大差別?

這裡列出的是 WordPress 中內邊距和邊距之間變化的快速清單:

填充利潤
填充通常意味著包括文章之間的位置和區塊的邊界。 邊距功能提供了塊邊界外部的位置。
使用填充不會影響網站上的其他區塊。 使用邊距會對網站上的其他區塊產生影響。
填充可以在區塊周圍形成一個緩衝區。 邊距可以在兩個不同的區塊之間留出空間。

如何在 WordPress 中使用填充

預設情況下,WordPress 完整網站編輯器 (FSE) 附帶填滿元素。

不過,請記住,如果您不使用依賴區塊的主題,那麼除非您使用個人化 CSS,否則您將無法在 WordPress 網站中新增填充。

首先,您需要從 WordPress 管理側邊欄存取實體外觀 » 編輯器頁面才能啟動完整的網站編輯器。

當您到達那裡時,只需從左側的“模板”側邊欄選擇您想要在區塊中包含填充的網站頁面模板即可。 此側邊欄將顯示您網站上獨特網路頁面的所有範本。

Choose the page where you want to add padding from the left column

完成後,您選擇的範本將立即在顯示幕上開啟。

從這裡,點擊「編輯」按鈕開始在綜合網站編輯器中自訂您的網站頁面範本。

Click the Edit icon for full site editor

接下來,決定要新增填充的區塊。 請記住,這意味著您將在內容和區塊的邊界之間產生空間。

這將在顯示器右側的區塊面板中開啟區塊的配置。

從這裡,您需要向下捲動到“維度”部分,然後點擊三點選單。 這將打開一個提示,您需要在其中選擇“填充”選項。

Choose the padding option from the Dimensions section

接下來,只需使用滑桿將填充插入到區塊中即可。

在 head 中維護該屬性將為區塊的所有邊添加填充。

Padding in full site editor

儘管如此,如果您只想將填充合併到區塊的頂部或底部,那麼您也可以透過點擊「填滿」選項旁邊的「取消連結側面」圖示來實現。

然後,您可以使用獨特的滑桿將填充插入到區塊的正確位置、左側、底部或頂部。

Padding for different corners

執行後,只需點擊“儲存”按鈕即可儲存您的設定。

如何在 WordPress 中使用保證金

就像填充一樣,邊距功能是在 WordPress 整個網站編輯器中設計的。 然而,如果您不使用區塊主題,則將無法存取此屬性。

首先,從 WordPress 儀表板前往視覺吸引力 » 編輯器網站。

到達那裡後,請在網站範本上決定要在左側列中插入頁邊距的位置。

Choose page for margin from the left column

這將開啟您在顯示器上選擇的頁面模板。

從此處列出的內容中,只需選擇「編輯」按鈕即可開始在完整的網站編輯器中自訂您的範本。

Click the Edit icon for full site editor

接下來,選擇要編輯的區塊,然後向下捲動到右側方塊面板中的「尺寸」區域。

從此處列出的內容中,主要使用滑桿為區塊的最高評級、基本、剩餘和理想角設定獨特的邊距。 利用此特徵將在您選擇的街區周圍開發空間。

Add margin in the full site editor

但是,如果您想要使用單獨的滑桿在區塊附近包含相等的邊距,請按一下「邊距」選項旁邊的「連結邊」圖示。

塊面板現在將在螢幕上顯示一個單獨的“邊距混合”滑塊,您可以使用它來構建靠近塊的等效邊距。

Use margin slider

完成後,請不要忘記點擊頂部的“儲存”按鈕來儲存您的選項。

在 WordPress 中修改整個網站的更多技巧

除了為區塊添加填充和邊距之外,您還可以使用整個網站編輯器來自訂完整的 WordPress 主題。

例如,您可以設計和設計所有網站模板、添加您的個人自訂徽標、選擇品牌顏色、改進結構、修改字體尺寸、合併資格圖片等等。

您還可以將模式和不同的區塊插入您的網站以進一步自訂它。 有關具體信息,您可能想查看我們的初學者指南,以了解如何自訂您的 WordPress 主題。

Add patterns to your layouts

您也可以使用 FSE 將標題、導覽選單或客製化 CSS 合併到您的網站中。

此外,您還可以使用世界設計來確保整個網站的一致性。 如需其他全面的指南,您可能需要查看我們關於如何在 WordPress 網站上個人化顏色的指南。

Choose a background color from the Color Picker

儘管如此,如果您不喜歡使用完整的網站編輯器,並且希望在網站的物理外觀之上添加額外的控制,那麼您可以使用 SeedProd 來創建網頁甚至完整的主題。

它是業界最好的登陸頁面建立器,具有拖放建立器,可以幫助您非常簡單地為您的網站產生精彩的主題。

有關更多方面,您可以參閱我們的教程,以了解如何輕鬆產生客製化的 WordPress 主題。

Edit theme template

我們希望這篇文章能幫助您理解 WordPress 中內邊距和邊距的差異。 您可能還會對我們關於如何在 WordPress 中調整塊頂部和寬度的初學者手冊以及我們最有效的 WordPress 古騰堡塊插件的最佳選擇感興趣。

如果您喜歡這篇短文,請務必訂閱我們的 WordPress 影片教學 YouTube 頻道。 您也可以在 Twitter 和 Facebook 上找到我們。