If we want to add space on the bottom (below this heading)? We can add margin to the bottom.Īlso, notice how this same class is applied to all the headings here. Now, if we want to click into that number? We can type a value manually and hit enter, or we can choose from any of the presets.īut for now, let’s move to margin, which is the space OUTSIDE of an element. But here’s a card, if we want to add space inside our card before the image starts? We just click and drag to add padding. Now, we’ll be using the Webflow Designer to demo this, but for a lot of it, we’ll pull up the CSS preview so you can follow along if you’re learning the syntax or hand-coding your layouts. Let’s get right into adjusting padding and margin. And we’ll use the classic Occam’s square example. And it’s usually made up of two components: padding (which is the space inside an element) and margin (which is the space outside an element).Īnd we’ll cover how to adjust padding and margin on different kinds of elements (on one side, on opposing sides, and even on all sides), we’ll cover how to center something using auto margin, we’ll talk about negative margin and how we can use it to achieve overlapping designs, and at the end, we’ll tie it all together and make a critical note about when to USE padding and margin, and just as importantly, when NOT to use padding and margin. Spacing is the foundation for almost every modern layout on the web.
0 kommentar(er)
