In this guide, we will be discussing the differences between Spacing, Sizing and Positioning, the tools or properties that are associated with these concepts and ultimately helping you design with a clearer intention when using bricks.
We are all aware that these concepts and properties may overlap with one another because a tool for Spacing can change the location of an element, which makes it a positioning tool. The goal of introducing the differences between these concepts is to give you better judgement and decision when it comes to how you will properly position, align and give functional spaces to your elements.
This guide will get very advanced especially for those who aren’t familiar with CSS and HTML, but I will try to make this as accessible as possible and please tag Kasual if you have questions or believe that this could be improved.
CSS Box Model
While Bricks is a tool for designing, it is built on top of web development fundamentals. Therefore, a conceptual understanding of how your element is perceived by the browser can help you think clearly about how you shape, space and position your elements.
Every single element on a webpage is read this way:
This includes your: Section, Containers, Blocks, Headings, Rich Text, Image, everything on your page has these properties. You may not visually see it because you haven’t set it yet. But here’s a breakdown of the element:
- The “Hello World” text is your content, the amount of content you have determine its size meaning its width and height. If you establish a width and height (and their min/max variant) to your content, it will be calculated on that content section as well.
- Then you have your padding which resides outside of your content but within your border.
- Followed by the border that basically separates your padding and margin, usually stylized with a line.
- And finally, your margin that sits outside of your border, typically used to separate different elements.
Again, this concept doesn’t have to be mastered now, but if you take the time to learn and experiment, I believe that you will have more clarity over your design and understanding what went wrong.