Start with margin and padding
Margin and padding are used to control the spacing between elements on a webpage. Margins can be applied to various types of elements, including block-level and inline-level elements such as divs, paragraphs, headings, and images. One of the easiest ways to clean up a design is to simply give every element a little more room to breathe
Every element in HTML has its own default margin and padding. This might explain the reason HTML comes up at the first place
When designing for the web, white space is almost always added to a design—if something looks a little too cramped, you add a bit of margin or padding until things look better.
Container in Bootstrap is a good example of this :)
Dense UI has its place
While interfaces with a lot of breathing room almost always feel cleaner and simpler, there are certain situations where it makes sense for a design to be much more compact.
For example, if you’re designing some sort of dashboard where a lot of information needs to be visible at once, packing that information together so it all fits on one screen might be worth making the design feel more busy.
If you pay attention to this design
Sidebar lay its content in center
Dashboard lay its content at the center
Calalender has its own padding
Hello, Anne has her own padding
Today's appointments has its own padding too
A word on margin-collapse
When two block-level elements are placed directly on top of each other without any content or padding between them, their vertical margins will collapse. The margin of the taller element will expand to include the margin of the shorter element.
.element1, .element2 {
margin-block-end: 2rem;
}
This may look like a bug in CSS; we should have a total of 4rem, right? The key is to think about the origin and purpose of CSS and styling text in documents
If the margin is not collapsed, here is what we get:
There's an inconsistency between every item in this picture; the purpose is that we want to have a margin-block-start and end for each paragraph (1em)
Even if we switch the image , the flow of the page is still the same; every paragraph has a space at the top and bottom for each element (1em)
Establish a spacing and sizing system
You shouldn’t be nitpicking between 120px and 125px when trying to decide on the perfect size for an element in your UI.
Limit yourself to a constrained set of values and define everything in advance.
Defining margin and padding
A simple approach is to start with a sensible base value and then build a scale using factors and multiples of that value.
16px is a great number to start with because it divides nicely and also happens to be the default font size in every major web browser.
Need to add some space under an element? Grab a value from your scale and try it out
You don't have to fill the whole screen
If you only need 600px, use 600px. Spreading things out or making things unnecessarily wide just makes an interface harder to interpret, while a little extra space around the edges never hurts anyone.
This is just as applicable to individual sections of an interface, too. You don’t need to make everything full-width just because something else (like your navigation) is full-width
Container in Bootstrap is a good example of this
Give each element just the space it needs; don't make something worse just to make it match something else
Start with mobile layout
Once you have a mobile design you’re happy with, bring it over to a larger screen and adjust anything that feels like a compromise on smaller screens. Odds are, you won’t have to change as much as you think.
Thinking in columns
If you wanted to make better use of the available space without making the form harder to use, you could break the supporting text out into a separate column
Grids are overrated.
Using a system like a 12-column grid is a great way to simplify layout decisions and can bring a satisfying sense of order to your designs.
Not all elements should be fluid
Fundamentally, a grid system is just about giving elements fluid, percentage-based widths, where you’re choosing from a constrained set of percentages.
The problem with treating grid systems like religion is that there are a lot of situations where it makes much more sense for an element to have a fixed width instead of a relative width.
For example, consider a traditional sidebar layout. Using a 12-column grid system, you might give the sidebar a width of three columns (25%) and the main content area a width of nine columns (75%).
If you make the screen narrower, the sidebar can shrink below its minimum reasonable width, causing awkward text wrapping or truncation
.content {
display:grid;
grid-template-columns: minmax(20rem,20%) 1fr;
}
Avoid ambiguous spacing
Ambiguous spacing can lead to confusion and make it difficult for users to navigate and understand your content.
Vertical space
When groups of elements are explicitly separated—usually by a border or background color—it's obvious which elements belong to which group.
But when there isn’t a visible separator, it’s not always so obvious
The fix is to increase the space between each form group so it’s clear which label belongs to which input
This same problem shows up in article design when there’s not enough space above section headings
and in bulleted lists, when the space between bullets matches the line- height of a single bullet
Horizontal space
It’s not just vertical spacing that you have to worry about either; it’s easy to make this mistake with components that are laid out horizontally, too
Whenever you’re relying on spacing to connect a group of elements, always make sure there’s more space around the group than there is within it—interfaces that are hard to understand always look worse.
In this article, we discuss the importance of margin and padding in web design, the benefits of dense UI in certain situations, the concept of margin-collapse, and the need for a spacing and sizing system. We also emphasize the significance of not overstretching elements, starting with mobile layouts, thinking in columns, and using grids judiciously. Lastly, we stress the importance of avoiding ambiguous spacing in both vertical and horizontal layouts to enhance user experience and understanding.