--- title: BLAZE Sites | Understanding The Basics description: R-Suite Knowledge Base --- [Skip to content](https://support.blaze.me/articles/blaze-sites-understanding-the-basics#main-content) [![BLAZE-Logo-Blue (2)](https://support.blaze.me/hs-fs/hubfs/BLAZE-Logo-Blue%20(2).png?width=140&height=37&name=BLAZE-Logo-Blue%20(2).png)](https://support.blazepos.com/?hsLang=en) - [BLAZE Apps Knowledge Base](https://support.blazepos.com/) Open main navigation Close main navigation - [BLAZE Apps Knowledge Base](https://support.blazepos.com/) Questions? Find helpful articles by searching here... - There are no suggestions because the search field is empty. 1. [R-Suite Knowledge Base](https://support.blaze.me/articles?hsLang=en) 2. [BLAZE Sites](https://support.blaze.me/articles/blaze-sites?hsLang=en) 3. [Customization](https://support.blaze.me/articles/blaze-sites?hsLang=en#customization) # BLAZE Sites | Understanding The Basics ## Understand a few key layout terms: padding, margin, and units like px (pixels) and % (percentages). ### What Is Padding? **Padding** is the space *inside* an element, between the element's content (like text or images) and its border. Think of it as breathing room inside a box. If you increase the padding, the content moves away from the edges of the box and gives it more internal space. **Example**: Imagine a button with text inside. If you add more padding, the button will grow because the space between the text and the edge of the button increases. ### What Is Margin? **Margin** is the space *outside* an element, between the element and whatever is around it—other elements, text, or the edge of the page. Margins are used to create space between different sections on your website. **Example**: If you want to separate two blocks of text, adding a top or bottom margin will push them apart and make the page easier to read. ### What’s the Difference Between px and %? When you're adjusting padding or margin, you'll often see options to set values in **px** or **%**. These are units that define how much space to add. - **px (pixels)**: A fixed size. No matter the screen size, 20px will always be 20 pixels. This is great for precise spacing. - **% (percent)**: A relative size. It adjusts based on the size of the parent element. 10% padding means the padding will be 10% of the width (or height) of the container it’s in. This is useful for responsive design. - [Getting started](https://support.blaze.me/articles/getting-started?hsLang=en) - [Dashboard](https://support.blaze.me/articles/dashboard?hsLang=en#main-content) - [General](https://support.blaze.me/articles/dashboard?hsLang=en#general) - [Settings](https://support.blaze.me/articles/dashboard?hsLang=en#settings) - [Employees](https://support.blaze.me/articles/dashboard?hsLang=en#employees) - [Customers](https://support.blaze.me/articles/dashboard?hsLang=en#customers) - [Products](https://support.blaze.me/articles/dashboard?hsLang=en#products) - [Inventory](https://support.blaze.me/articles/dashboard?hsLang=en#inventory) - [Sales](https://support.blaze.me/articles/dashboard?hsLang=en#sales) - [Purchase Orders](https://support.blaze.me/articles/dashboard?hsLang=en#purchase-orders) - [Discounts](https://support.blaze.me/articles/dashboard?hsLang=en#discounts) - [Reports](https://support.blaze.me/articles/dashboard?hsLang=en#reports) - [POS (Tablet)](https://support.blaze.me/articles/pos-tablet?hsLang=en#main-content) - [Getting Started](https://support.blaze.me/articles/pos-tablet?hsLang=en#getting-started) - [General](https://support.blaze.me/articles/pos-tablet?hsLang=en#general) - [POS Register](https://support.blaze.me/articles/pos-tablet?hsLang=en#pos-register) - [Starting and Ending Shifts](https://support.blaze.me/articles/pos-tablet?hsLang=en#starting-and-ending-shifts) - [POS (Browser)](https://support.blaze.me/articles/pos-browser?hsLang=en#main-content) - [Starting and Ending Shifts](https://support.blaze.me/articles/pos-browser?hsLang=en#starting-and-ending-shifts) - [General](https://support.blaze.me/articles/pos-browser?hsLang=en#general) - [POS Register](https://support.blaze.me/articles/pos-browser?hsLang=en#pos-register) - [BLAZE ECOM](https://support.blaze.me/articles/blaze-ecom?hsLang=en#main-content) - [Customization](https://support.blaze.me/articles/blaze-ecom?hsLang=en#customization) - [ECOM Discounts](https://support.blaze.me/articles/blaze-ecom?hsLang=en#ecom-discounts) - [SEO](https://support.blaze.me/articles/blaze-ecom?hsLang=en#seo) - [General](https://support.blaze.me/articles/blaze-ecom?hsLang=en#general) - [ECOM Set-up](https://support.blaze.me/articles/blaze-ecom?hsLang=en#ecom-set-up) - [BLAZEPAY](https://support.blaze.me/articles/blazepay?hsLang=en#main-content) - [Getting Started](https://support.blaze.me/articles/blazepay?hsLang=en#getting-started) - [General](https://support.blaze.me/articles/blazepay?hsLang=en#general) - [BLAZEPAY Merchant Portal](https://support.blaze.me/articles/blazepay?hsLang=en#blazepay-merchant-portal) - [Hardware](https://support.blaze.me/articles/hardware?hsLang=en#main-content) - [General](https://support.blaze.me/articles/hardware?hsLang=en#general) - [Printers](https://support.blaze.me/articles/hardware?hsLang=en#printers) - [Payments](https://support.blaze.me/articles/hardware?hsLang=en#payments) - [Scanners](https://support.blaze.me/articles/hardware?hsLang=en#scanners) - [BLAZE Sites](https://support.blaze.me/articles/blaze-sites?hsLang=en#main-content) - [General](https://support.blaze.me/articles/blaze-sites?hsLang=en#general) - [Customization](https://support.blaze.me/articles/blaze-sites?hsLang=en#customization) - [Widgets](https://support.blaze.me/articles/blaze-sites?hsLang=en#widgets) - [SEO](https://support.blaze.me/articles/blaze-sites?hsLang=en#seo) [![BLAZE-Logo-Blue (2)](https://support.blaze.me/hs-fs/hubfs/BLAZE-Logo-Blue%20(2).png?width=140&height=37&name=BLAZE-Logo-Blue%20(2).png "BLAZE-Logo-Blue (2)")](http://blaze.me) BLAZE Apps Knowledge Base Copyright © 2026, BLAZE Solutions Inc.