Trong menu có hai loại khoảng cách. Padding là khoảng trống bên trong, tính từ chữ ra tới mép khung chứa nó. Margin là khoảng trống bên ngoài, dùng để đẩy khung đó ra xa những thứ xung quanh.
Ở bước Design, bạn có 3 chỗ để chỉnh khoảng cách: cho từng mục menu cấp 1, cho từng mục cấp 2–3, và cho cả khung menu. Các ô này giống nhau trên Shopify, Wix và mọi website khác.
Cách nhập số vào ô khoảng cách
Mọi ô khoảng cách đều tính bằng px. Ở hai khối Each item spacing, mỗi ô là một dòng. Khi bạn bấm vào ô, màn hình sẽ hiện hình hai hộp lồng nhau để bạn điền từng cạnh, hoặc bạn có thể gõ thẳng số vào ô theo quy tắc sau:
- Nhập 1 số, ví dụ
12: cả bốn cạnh bằng nhau. - Nhập 2 số, ví dụ
8 16: số đầu cho cạnh trên và dưới, số sau cho cạnh trái và phải. - Nhập 4 số, ví dụ
8 16 8 16: lần lượt cho cạnh trên, phải, dưới, trái. - Đặt riêng cho điện thoại và máy tính: gõ theo mẫu
điện thoại | máy tính, ví dụ 8 | 24 là 8px trên điện thoại và 24px trên máy tính. Nếu nhập trong hình hai hộp lồng nhau, bạn bỏ chọn Same as mobile để điền số riêng cho máy tính. - Riêng ô Margin nhận được số âm. Ví dụ nhập
-16vào margin trái sẽ kéo mục menu sang trái 16px.
Nếu bạn để trống không điền, mục cấp 1 sẽ dùng khoảng cách mặc định của menu, còn mục cấp 2–3 sẽ lấy theo số của cấp 1 khi ô hiện chữ Inherit.
Chỉnh khoảng cách từng mục cấp 1
Bạn vào thẻ Main menu › Main menu item › Each item spacing. Khối này có ở cả 6 loại menu, dùng để chỉnh khoảng cách của từng mục menu ở cấp 1 chứ không phải cả thanh.
| Ô trong app | Tác dụng | Mặc định |
|---|---|---|
| Padding (px) | Khoảng trống bên trong mỗi mục menu. Tăng số này thì mục rộng ra, khách dùng điện thoại dễ bấm hơn. Giảm xuống thì các mục gọn lại. | Để trống: Inherit (top right bottom left) |
| Margin (px) | Khoảng trống bên ngoài mỗi mục menu, giúp đẩy các mục đứng xa nhau ra. | Để trống: Inherit (top right bottom left) |
Khi nào cần chỉnh: nếu thấy các mục dính sát nhau thì bạn tăng Margin, còn nếu mục quá hẹp và khó bấm thì tăng Padding.
Chỉnh khoảng cách từng mục cấp 2–3
Bạn vào thẻ Sub menu › Sub menu item › Each item spacing. Khối này có ở Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu và Mobile Mega Menu. Riêng Icon Menu không có thẻ Sub menu.
Hai ô Padding (px) và Margin (px) ở đây hoạt động giống cấp 1, nhưng chỉ áp dụng cho các mục nằm trong bảng menu con. Mặc định cả hai ô đều để trống và hiện Inherit.
Khi nào cần chỉnh: khi bạn muốn danh sách menu con trông thoáng hơn hoặc xếp dày hơn so với menu chính bên ngoài.
Chỉnh khoảng cách cả khung menu
Bạn vào thẻ Main menu › Main menu container › Container spacing, chỗ có dòng chữ nhỏ Inner/outer spacing bên cạnh. Khối này có ở cả 6 loại menu. Khác với hai mục trên, phần này chỉnh cả khung menu chứ không chỉnh từng mục lẻ. Thẻ Sub menu không có khối này.
| Ô trong app | Tác dụng | Mặc định |
|---|---|---|
| Margin — 4 ô Top, Right, Bottom, Left | Khoảng trống bên ngoài khung, đẩy cả thanh menu cách xa mép màn hình và những thứ xung quanh. | Trống |
| Padding — 4 ô Top, Right, Bottom, Left | Khoảng trống bên trong khung, tính từ mép khung vào tới các mục menu. | Trống |
| Khối này tách sẵn 8 ô riêng cho từng cạnh nên bạn không cần gõ 2 hay 4 số. Mỗi ô chỉ cần điền một số, hoặc gõ theo mẫu điện thoại | máy tính như mục Cách nhập số vào ô khoảng cách. Ngay trong khối cũng có dòng nhắc **Single value = both (e.g. 12) or Mobile | Desktop (e.g. 8 | 16). Khung **Your menu ở giữa hình chỉ để minh họa vị trí các cạnh. |
Khi nào cần chỉnh:
- Muốn làm Tab Bar nổi tách khỏi mép màn hình: bạn thêm Margin vào các ô Bottom, Left và Right. Xem cách làm cụ thể trong bài Vị trí và khoảng cách menu.
- Muốn đẩy cả khung menu dịch đi một chút so với vị trí mặc định: chỉnh Margin.
- Muốn phần nền bên trong khung menu rộng rãi hơn: tăng Padding.
Từng ô khoảng cách
Mỗi ô dưới đây có một mục riêng để bấm nút (?) cạnh ô là tới đúng chỗ. Cả 6 ô giống nhau trên Shopify, Wix và mọi website khác, mọi gói đều dùng được.
Padding (px) — Each item spacing, thẻ Main menu
Vào bước Design › thẻ Main menu › Main menu item › Each item spacing. Ô này thêm khoảng trống bên trong mỗi mục, tính từ chữ ra tới mép mục.
- Đơn vị và cách nhập: px. Gõ 1, 2 hoặc 4 số, có thể tách
điện thoại | máy tính(xem cách nhập số). Menu mới để trống, ô hiện Inherit (top right bottom left). - Áp cho: cả 6 loại menu, mọi loại mục.
- Cấp nào: số này áp cho mục cấp 1, và cả mục cấp 2–3 chừng nào ô Padding (px) của thẻ Sub menu còn trống. Khi thẻ Sub menu có số riêng thì cấp 2–3 dùng số đó.
- Khách thấy gì khi đổi: tăng số thì từng mục dày ra, vùng bấm to hơn, khách dùng điện thoại dễ chạm. Giảm số thì các mục gọn lại, menu thấp xuống.
Margin (px) — Each item spacing, thẻ Main menu
Cùng khối Each item spacing ở thẻ Main menu, ô nằm dưới Padding (px). Margin là khoảng trống bên ngoài mỗi mục, đẩy các mục xa nhau.
- Đơn vị và cách nhập: px, gõ 1, 2 hoặc 4 số; nhận số âm. Menu mới để trống (Inherit).
- Áp cho: cả 6 loại menu. Giống ô Padding, số này áp cho cả mục cấp 2–3 nếu ô Margin (px) của thẻ Sub menu còn trống.
- Khách thấy gì khi đổi: tăng số thì các mục tách xa nhau, có kẽ hở giữa các mục. Khác với padding, phần khoảng trống này không thuộc về mục nên không làm mục to ra.
Padding (px) — Each item spacing, thẻ Sub menu
Vào bước Design › thẻ Sub menu › Sub menu item › Each item spacing. Ô này chỉ chỉnh khoảng trống bên trong của các mục trong bảng menu con (cấp 2–3).
- Đơn vị và mặc định: px. Để trống thì hiện Inherit và mục con lấy theo số của thẻ Main menu.
- Áp cho: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu và Mobile Mega Menu. Icon Menu không có thẻ Sub menu.
- Khách thấy gì khi đổi: điền số thì chỉ các mục trong bảng con đổi độ dày, mục cấp 1 giữ nguyên. Dùng khi muốn menu con thoáng hơn hoặc xếp dày hơn menu chính.
Margin (px) — Each item spacing, thẻ Sub menu
Cùng khối Each item spacing ở thẻ Sub menu, ô nằm dưới Padding (px). Ô này chỉnh khoảng cách bên ngoài giữa các mục cấp 2–3.
- Đơn vị và mặc định: px. Để trống thì hiện Inherit và lấy theo số của thẻ Main menu.
- Áp cho: như ô Padding của thẻ Sub menu (không có ở Icon Menu).
- Khách thấy gì khi đổi: các dòng trong bảng menu con tách xa hoặc sát lại nhau; menu cấp 1 không đổi.
Margin — Container spacing
Vào bước Design › thẻ Main menu › Main menu container › Container spacing. Đây là bộ 4 ô Top, Right, Bottom, Left của Margin: khoảng trống bên ngoài cả khung menu.
- Đơn vị và mặc định: px, mỗi ô một số; có thể gõ
điện thoại | máy tính. Menu mới để trống. Nhận số âm. - Áp cho: cả 6 loại menu. Thẻ Sub menu không có khối này.
- Khách thấy gì khi đổi: cả thanh menu dịch ra xa mép màn hình và những thứ xung quanh. Ví dụ Tab Bar thêm Margin ở Bottom, Left, Right thì thanh nổi lên cách mép (xem bài Vị trí và khoảng cách menu).
Padding — Container spacing
Cùng khối Container spacing, bộ 4 ô Top, Right, Bottom, Left của Padding: khoảng trống bên trong khung menu, bao quanh toàn bộ các mục.
- Đơn vị và mặc định: px, mỗi ô một số, có thể gõ
điện thoại | máy tính. Menu mới để trống. - Áp cho: cả 6 loại menu.
- Khách thấy gì khi đổi: phần nền của khung menu dày thêm quanh các mục, các mục bị đẩy vào trong cách mép khung. Với Tab Bar nổi, panel con mở ra cũng tự bù theo padding trái phải để vẫn thẳng hàng với thanh.
Bảng tra nhanh
| Ô trong app | Chỉnh phần nào | Nằm ở thẻ | Loại menu |
|---|---|---|---|
| Padding (px) — Each item spacing | Bên trong từng mục cấp 1 | Main menu | Tất cả |
| Margin (px) — Each item spacing | Bên ngoài từng mục cấp 1 | Main menu | Tất cả |
| Padding (px) — Each item spacing | Bên trong từng mục con | Sub menu | Trừ Icon Menu |
| Margin (px) — Each item spacing | Bên ngoài từng mục con | Sub menu | Trừ Icon Menu |
| Margin — Container spacing | Bên ngoài cả khung menu | Main menu | Tất cả |
| Padding — Container spacing | Bên trong cả khung menu | Main menu | Tất cả |