Web design often involves intricate details that define the look and feel of a webpage. Two of these essential details are margins and padding.
Margins
Margins determine the space outside an element, effectively creating a gap between it and surrounding elements. Think of it as the outer boundary of your element, separating it from others.
Padding
Padding, on the other hand, is the space inside an element's border. It determines the distance between the content of the element and its border, offering room for the content to breathe and ensuring it doesn't feel cramped.
Applying margins
Directional control
You can adjust margins individually for the top, bottom, left, or right side of an element or the container itself. This ability offers precise control, allowing designers to position elements perfectly within a container.
Negative margins
A lesser-known trick in web design is the use of negative margins. When combined with properties like z-index, negative margins can enable elements to stack or overlap. For instance, if you want a section to visually cover another, applying a top negative margin would achieve this effect.
Applying paddings
Containers
Padding is pivotal in ensuring that elements within containers have sufficient space around them. Applying a percentage-based padding, say 5% on the top and bottom of a container, can significantly enhance visual appeal, making content more readable and engaging.
Internal adjustments
Besides spacing out content from the borders, padding can also be used to control the visual space within containers, ensuring a balanced look.
How to locate and adjust settings
Advanced settings
Typically, general padding and margin settings for elements are located under the Advanced Tab of the widget or container in the 10Web website builder.
Additional padding settings
Widgets, such as buttons and forms, may have extra settings located under the Style Tab, allowing for more granular adjustments.
Global settings
The Site Settings usually house default values for container paddings. It's worth noting that any settings made on the container itself would override these defaults.
You can access the default value for the container’s padding from Layout Settings.
Measurement units
When setting values for margins and padding, designers have multiple units at their disposal, including PX, EM, %, and REM. A handy feature in many design tools is the chain icon, which when clicked, can unlink values, allowing for individual adjustments.