Red grunge

Next modules

Popular
New
Free
Clock icon
12:25min
Icon showing a graph
beginner

10-20-30 or 6-54?

10-20-30 training improves the players’ high intensity exercise capacity.

€24.99
€54.99
Bestseller
Popular
New
Free
Clock icon
12:25min
Icon showing a graph
beginner

7-14 min of additional repeated sprint training is all it takes.

7-14 min of additional repeated sprint training is all it takes.

€24.99
€54.99
Bestseller
Popular
New
Free
Clock icon
12:25min
Icon showing a graph
beginner

All movements of a football player rolled into one single number.

Sports science is the application of scientific principles to sport

€24.99
€54.99
Bestseller
Popular
New
Free
Clock icon
12:25min
Icon showing a graph
beginner

Female players get 6 times more severe injuries.

Female football players are reported to have 21% more absence due to injury compared to men.

€24.99
€54.99
Bestseller

Spacing is the foundation for almost every modern layout on the web. 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).

And 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. And we’ll use the classic Occam’s square example.

Let’s get right into adjusting padding and margin. 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. 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. That’s it. We added padding inside the element.

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.

But for now, let’s move to margin, which is the space OUTSIDE of an element. If we want to add space on the bottom (below this heading)? We can add margin to the bottom.

Also, notice how this same class is applied to all the headings here. That means changing this styling on any one of them affects any heading in the project that has this class applied.

But what about buttons? Sometimes we want to adjust padding (we want to add space on both sides), but it’s a bit tedious to perfectly match both sides at once.

Enter: opposing sides. Just hold down Option on macOS or Alt on Windows and click and drag. Adjust both sides at once. This is helpful on all kinds of elements — like Containers...or iridium. (All our content here is inside a container, and it looks good on Desktop and Tablet) but when we get to Mobile landscape? It needs some breathing room. So. With the container selected, we’ll hold down Option (or Alt) and click and drag to add space on both sides at once. This’ll affect Mobile landscape, and of course, our changes cascade down to Mobile portrait.

What about all sides? Same deal here, except we’ll hold down shift when we adjust padding (these shortcuts work for margin, too).

Alright what about centering? One common technique for horizontally centering something like a container is to use auto margin. Apple does this (they use auto margin), Google does this on both sides, Figma — same deal here...you’ll see this technique all over the internet. An example would be here with a blank page: we have a div block (just a blank rectangle) and a bunch of stuff inside. If we want to horizontally  er it? We can just set the margin on the left to auto, and we can go in and do the same on the right side (set it to auto). Now it’s horizontally centered.

Now. Do we have to manually set each side to auto every time? There’s a shortcut for this — you can just press the tiny button here to set both sides to auto.

Understanding, module 1, video 3

Clock icon
2:01
min
Play icon
Module
1
-
Test module mental 1
Icon showing a graph
Mental

About this video

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

About this class

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Exam questions

Write down the key metrics that you currently track. Which parts of the customer purchase funnel are you currently tracking? Which ones do you need to start tracking?

Sketch your projected growth as a player. On the x axis is 7 weeks and on the y axis your total Player Load.

What do you do when you're severely injured by the end of the season?

Submit your answers

Type your answers in your favorite text editor, export as a PDF file and upload here. We'll review your answers soon and qualify you.

Uploading...
fileuploaded.jpg
Upload failed. Max size for files is 10 MB.
Check mark icon in purple gradient
Your submission has been received
Oops! Something went wrong while submitting the form.

go deeper

How to run faster in 10 days

Blog article on this and that.

How to run faster in 10 days

Blog article on this and that.

How to run faster in 10 days

Blog article on this and that.

The world's most ambitious online football academy

A course for every player. More coming weekly

Learning objectives
Experienced teacher
Unique content
Certified course
Free

Get notified of new academy classes

Email address
Thank you! Your message has been received!
Something went wrong while submitting the form.

Popular

Coming soon
Play icon
Tracking your physical shape

Recent

Coming soon
Play icon
Tracking your physical shape