如何調(diào)整網(wǎng)頁(yè)元素之間的邊距，提升網(wǎng)頁(yè)瀏覽體驗(yàn)！

圖片來(lái)源：圖蟲創(chuàng)意

今天跟大家說(shuō)說(shuō)如何調(diào)整網(wǎng)頁(yè)的頁(yè)邊距，讓網(wǎng)頁(yè)的手機(jī)端自適應(yīng)。

圖片來(lái)源：WordPress截圖

Elementor編輯器

我最喜歡的使用的網(wǎng)頁(yè)編輯器Elementor，它可以幫助我們輕代碼甚至無(wú)代碼的條件下，搭建出漂亮，美觀，大氣的網(wǎng)站。

網(wǎng)頁(yè)的Margin, Padding, Border

圖片來(lái)源：WordPress截圖

Margin, Padding, Border是網(wǎng)頁(yè)前端設(shè)計(jì)里的CSS屬性，我們用了Elementor編輯器，就不用去廢寢忘食的學(xué)習(xí)CSS網(wǎng)頁(yè)前端設(shè)計(jì)，也可以很快的搭建出來(lái)漂亮外貿(mào)網(wǎng)站。

Margin: 網(wǎng)頁(yè)元素邊框以外的留的空白，上下左右都可以留白

我們可以把網(wǎng)頁(yè)的模塊想象成一個(gè)一個(gè)的盒子，盒子里面承載的是內(nèi)容content，盒子這個(gè)容器本身帶有邊框border（有一定的厚度，當(dāng)然也可以厚度為0，也就是沒(méi)有邊框）。盒子外邊的留白都叫margin，盒子內(nèi)部的間距都叫padding。

那我們知道了Margin, Padding, Border，就可以很好的去設(shè)計(jì)你的網(wǎng)頁(yè)元素了。

如何調(diào)整Margin, Padding

我們只要用了Elementor編輯器就可以很輕松的去設(shè)置調(diào)整網(wǎng)頁(yè)元素的Margin和Padding

圖片來(lái)源：WordPress截圖

在用Elementor編輯器設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，選擇你要調(diào)整的元素section，然后點(diǎn)擊advanced高級(jí)設(shè)置，就可以找到margin和padding設(shè)置，然后進(jìn)行設(shè)置就可以了。

手機(jī)端調(diào)整

圖片來(lái)源：WordPress截圖

Elementor可以分別對(duì)電腦端web，手機(jī)端mobile 和平板tablet進(jìn)行調(diào)整。

我建議手機(jī)端左右流出15~20像素的瀏覽，網(wǎng)頁(yè)效果是剛剛好的，不會(huì)太擁擠，也不會(huì)太膨脹，大家根據(jù)自己的喜好進(jìn)行調(diào)整就可以啦。

建站咨詢

最后，大家有什么問(wèn)題或者想說(shuō)，都可以在留言區(qū)留言哦。如果大家需要建站服務(wù)，還可以隨時(shí)咨詢我哦，Peace Out~

（來(lái)源：小王子的外貿(mào)筆記）

以上內(nèi)容屬作者個(gè)人觀點(diǎn)，不代表雨果跨境立場(chǎng)！本文經(jīng)原作者授權(quán)轉(zhuǎn)載，轉(zhuǎn)載需經(jīng)原作者授權(quán)同意。?