- 22
- 69 214
Dmitry Mayorov
Canada
Приєднався 5 січ 2024
Subscribe for easy to follow web tutorials, and more! 🚀
CSS Vertical Spacing: Margins vs. Gaps Explained
Get updates about new videos → tinyurl.com/yuu8x8my
Follow me on Twitter: x.com/dmtrmrv
In this video, we explore the essentials of managing vertical spacing in CSS, starting with the importance of building components without default margins. I’ll guide you through the process of removing vertical margins and discuss why the gap property might not be the most suitable solution for spacing between elements.
We’ll then look at a more effective approach using margins, which provides greater flexibility and control over your design. I’ll show you how to use utility classes to establish consistent spacing, making your layout cleaner and more straightforward to maintain.
Finally, we’ll apply these concepts by creating a callout box and integrating it into our design. By the end of the video, you’ll have a solid understanding of how to use margins effectively to achieve well-organized and visually appealing layouts in your projects.
Chapters:
00:00 - Intro
00:19 - Don’t Use Margins on Components
00:42 - How to Create Space
01:23 - Let’s Try Gap Anyway
03:06 - Why I Don’t Like Gap for This
04:00 - The Margin Approach
04:58 - Improving the Approach with Utility Classes
06:28 - Let’s Test with a New Component
#CSS, #verticalspacing, #margins, #gapproperty, #designsystem, #webdevelopment, #frontend, #utilityclasses, #webdesign, #CSSbestpractices, #contentflow, #marginvsgap, #calloutcomponent, #CSStips, #responsivedesign
Follow me on Twitter: x.com/dmtrmrv
In this video, we explore the essentials of managing vertical spacing in CSS, starting with the importance of building components without default margins. I’ll guide you through the process of removing vertical margins and discuss why the gap property might not be the most suitable solution for spacing between elements.
We’ll then look at a more effective approach using margins, which provides greater flexibility and control over your design. I’ll show you how to use utility classes to establish consistent spacing, making your layout cleaner and more straightforward to maintain.
Finally, we’ll apply these concepts by creating a callout box and integrating it into our design. By the end of the video, you’ll have a solid understanding of how to use margins effectively to achieve well-organized and visually appealing layouts in your projects.
Chapters:
00:00 - Intro
00:19 - Don’t Use Margins on Components
00:42 - How to Create Space
01:23 - Let’s Try Gap Anyway
03:06 - Why I Don’t Like Gap for This
04:00 - The Margin Approach
04:58 - Improving the Approach with Utility Classes
06:28 - Let’s Test with a New Component
#CSS, #verticalspacing, #margins, #gapproperty, #designsystem, #webdevelopment, #frontend, #utilityclasses, #webdesign, #CSSbestpractices, #contentflow, #marginvsgap, #calloutcomponent, #CSStips, #responsivedesign
Переглядів: 1 424
Відео
4 Ways to Write Future CSS Today (and when to stick to trusted methods)
Переглядів 1,2 тис.3 місяці тому
Get updates about new videos → tinyurl.com/yuu8x8my Follow me on Twitter: x.com/dmtrmrv In this video, I’ll share four tips for using the latest CSS features without breaking your site in older browsers. We’ll dive into how to implement fallbacks, use the @supports rule for feature detection, and apply polyfills to use modern features on older browsers. I’ll also show you what postcss-preset-en...
The Next Big Thing in CSS: margin-trim!
Переглядів 18 тис.4 місяці тому
Managing space in CSS will soon get easier with the new margin-trim property, already available in Safari. In this video, we dive into how margin-trim simplifies CSS space management and compare it with traditional methods like the :first-child() and :not() pseudo-classes, and the famous lobotomized owl selector. Learn why margin-trim is a game-changer for keeping your CSS clean and maintainabl...
Master CSS Spacing: Margin, Padding, and Gap Explained
Переглядів 8934 місяці тому
In one of my videos, I said, 'Never use margins on reusable components!' Some of you asked, 'How do you create space then?' This video answers that. Plus, I'll break down how to choose between margin, padding, and gap in CSS with a real-world example - It's not always straightforward. Let's dive in! CodePen Before: codepen.io/dmtrmrv/pen/GRajVRx CodePen After: codepen.io/dmtrmrv/pen/rNgjmPp Mar...
This One Thing Causes Most CSS Issues! (learn how to avoid it)
Переглядів 2,4 тис.5 місяців тому
In this video, I discuss a common issue where engineers unintentionally "do too much," leading to problems in CSS. We review several examples, starting with a common method to center content using CSS shorthand. This technique often sets vertical margins to zero, which can cause problems if other rules need to apply vertical margins to that element. Next, we examine the "background" shorthand p...
Make Sense of Box-Sizing in CSS (and avoid this major mistake!)
Переглядів 9406 місяців тому
Get updates about new videos in your inbox → tinyurl.com/yuu8x8my In this video, we're going to take a close look at the 'box-sizing' property in CSS. We'll cover how it functions, the options you have, and a major mistake you'll want to avoid. Make sure you watch all the way to the end. The 'box-sizing' property controls the box model, or in simpler language - how the dimensions of an element ...
Why I'm Not in My Studio? (A Channel Update)
Переглядів 3346 місяців тому
In this video, I'd like to take a short break from my usual content to provide a quick channel update. I'll share what you can expect in the coming months and explain what happened to my beautiful studio with all the lights, the purple backdrop, Walter the plant, and the Rage Against the Machine poster. Subscribe to know when the new videos are up and to learn when the free web-app mini-course ...
Refactoring Old CSS with AI!
Переглядів 1,3 тис.6 місяців тому
In this video, I discuss an interesting case study on how I successfully refactored a substantial amount of old CSS using AI. We explore how you can start using AI today to tackle tedious tasks and enhance your productivity. I explain how I refactored numerous Sass variables into CSS custom properties and adjusted the root font size from 10px to 16px, completing in a few hours what would manual...
Flex-Grow vs Auto Margins: Which Wins?
Переглядів 7956 місяців тому
In one of my previous videos, we explored how to align flex items using auto margins. Since then, I've received several questions under that video asking why not use "flex-grow" instead. So, I've decided to create a short follow-up video explaining the differences. CodePen used in the video: codepen.io/dmtrmrv/pen/xxBPowg Chapters: 00:00 - Introduction 00:20 - Recap of the Previous Video 01:07 ...
Master CSS Units: Pixels, REMs, & EMs
Переглядів 1,2 тис.6 місяців тому
In this video, we'll explore three essential CSS units: pixels, rems, and ems, focusing on when and how to best apply them. But Instead of simply saying 'use pixels here, rems there, and ems in another place,' my goal is to clarify how these units operate so you're better equipped to make informed decisions in your own projects. I'll also share some tips to streamline your calculations for rem ...
Is Mobile-First Design Still Relevant in 2024?
Переглядів 3,1 тис.7 місяців тому
Is a mobile-first approach still important in 2024? Let's break it down. In this video, I discuss what mobile-first means and whether following this approach is worthwhile. We explore mobile-first through the lenses of content, visual design, accessibility, and engineering, including tips on HTML and CSS. Chapters: 00:00 - Introduction 00:25 - Mobile-First Is Not Just About Min-Width Media Quer...
Create a Sticky Header with HTML & CSS: A Step-by-Step Tutorial
Переглядів 1,7 тис.7 місяців тому
Learn how to create a sticky header that adjusts its height and seamlessly integrates with internal links. This video explains the implementation of a sticky header using HTML, CSS, and a bit of JavaScript, showing how to maintain the header's flexibility and accessibility as you add more content. Demo: codepen.io/dmtrmrv/pen/xxeEGbg Chapters: 00:00 - Intro 00:11 - HTML & CSS Basics 00:44 - Mak...
Keep Footer at the Bottom of the Page: HTML & CSS (2024)
Переглядів 3,4 тис.7 місяців тому
Keep the footer at the bottom of the page, even on pages with minimal content. In this video, we tackle the popular layout challenge of keeping the footer at the bottom of the page, using CSS grid and dynamic viewport units for a sturdy solution, especially on mobile devices where the page height can vary as users scroll. CodePen: codepen.io/dmtrmrv/pen/NWmxbPx Chapters: 00:00 - Introduction 00...
Learn CSS BEM (and avoid these common mistakes)
Переглядів 7 тис.7 місяців тому
In this video, we're diving into BEM, which stands for Block Element Modifier-a popular semantic CSS methodology. We'll break down the basics of BEM, including blocks, elements, and modifiers, and show you how they all work together. Plus, we'll cover some of the common questions people have and highlight mistakes to avoid. CodePen: codepen.io/dmtrmrv/pen/vYMEGpx Chapters: 00:00 - Intro 00:14 -...
CSS Subgrid Layouts Are Here!
Переглядів 8 тис.8 місяців тому
In this video, we'll explore together how to use CSS Subgrid for a popular layout: a newsletter sign-up form where everything aligns side by side, and the submit button lines up perfectly with the input fields. This setup can get a bit tricky, especially with the addition of labels and changing help text for the input fields. Previously, achieving such layouts often required JavaScript. But now...
Learn This Flexbox Item Alignment Trick!
Переглядів 13 тис.8 місяців тому
Learn This Flexbox Item Alignment Trick!
Rebuilding a Logo Grid on Michelin's Guide Website with HTML & CSS
Переглядів 6119 місяців тому
Rebuilding a Logo Grid on Michelin's Guide Website with HTML & CSS
Thanks, man. These tips come from years of experience-something you can't just read about. You definitely deserved a subscribe!
Thank you!
Nice explanations! 👍
Cool video, thanks. I like that you use block__element--modificator-name instead of block__element_modificator_name. I like double dash, it looks better IMHO.
This is some Good Stuff bro! Thanks for the info and keep sharing stuff!
Thank you for the kind words!
Too much knowledge in just 15 minutes. I watched it for 3 days, once in a day. Every time I watched it, I felt I missed something last time. Great👍
Glad it was helpful!
Short, clear and exactly what I wanted. Thank you.
Привіт з України ! Дякую Вам ! Brilliant, thank you, this works perfectly. I've been looking for a tutorial on grids
Glad you liked the video!
There is the problem, I don't want to say you are wrong but you are not completely right. First of all, clamping is not gonna work because of varied viewport. Yes, you can't set media query for each type of screen size but that's fine. You can just target few key sizes and keep the font size static for those key sizes. Clamping sounds like it solves the problem but it makes text looks really ugly when fonts don't resize properly w.r.t to other texts such as heading , sub heading, label, body etc. The harmony breaks. I have tried to implement this and it looked really really really ugly. One last thing, You mentioned font size will jump when screen size changes when media queries are used. This assumption is completely wrong. why ? Because most of the users wont be resizing their window, they would be accessing the website/app from a fixed screen size device.
This guy is awesome. The way he explains is clear and concise.
Good job!
Hi, is this also working if you have 2 columns with heading and paragraph which stack on mobile?
i like this video, keep them coming i subed
Thanks! Stay tuned for next week!
I use padding or margin with clamps. Pretty simple and great for responsiveness.
Excellent and very well explained tutorial. Thank you for sharing a very useful and efficient approach to creating vertical spacing -- that is consistent and engaging. Please make the source code available on code Codepen.
You're very welcome! Forgot to add the demo link, will add shortly!
very insightful. Thank you for the quick tip!
Thank you! Glad you enjoyed the video.
That's an nice evolution of the * + * { margin-top: 1.5em } approach. Also interesting that you use * + .has-medium-flow-space, .has-medium-flow-space + * { margin-block-start: ... } instead of * + .has-medium-flow-space { margin-block: ... }. Do you sort these util classes from large to small so a .has-small-flow-space element following a .has-large-flow-space element overrides the former rule and the two have the smaller margin between them?
Great, very useful and concrete, thank you!!!
Glad you enjoyed the video!
> better approach is to create a couple utility classes... Or just use TailwindCSS. Anyway, thanks for the video, I definitely gonna use it.
I like it. It's well thought out and simple to implement. Thank you Dmitry.
You are welcome!
Outstanding, simple and finesse
Thank you!
Back to the game 🔥
so helpful thx king 👑
Glad the video was helpful!
To set overflow-x auto don’t you need to define a width on the ul? Esp since it’s a flex parent ? Or is that further up in the markup ?
Curious if you use use a reset that zerors out margin and padding on everything alongsode setting box-sizing: border-box?
I do! It depends on the project, but I usually do it either in one pass, like so: :where(h1, h2, h3, p, ...) { margin-block: 0: } ...or for each individual element. It's much easier to build on top of this.
The site-header site__header (and sane w main and Footer) is breaking my brain. Gonna have to peek how each of these classes are styled. Also why not put the gutter on .site? Is it so you can have full width content if you need it?
With all this talk about "create modifier(s) or new block" has me curious what your views are on @container and the complete shade on nesting 😂 makes me wonder what you think about @layer . You couuulllddd put all your defaults in a "default" or "components" layer then any modifications in a "modifier" layer. And then specificity goes out the window.
*Well kinda. within the competing layers anyway.
Yeah, I am very curious about using @layers and @container. Didn't have a chance to use them on a real project yet. Layers do help resolve some specificity issues for sure!
For the algo! No srlsy thank you bro, didn't know about the ­ thing
Thank you!
Thanks for the new video! I’m looking forward to seeing what other content you post! Always good to learn as much as you can!
Thank you, Henry! Glad the video was helpful!
I like your videos because you cover up css from developers/tech point of view. And you explain the use cases. I generally feel advanced in this field but a check up is always a good idea. Dig deeper :-) Thanks
Thank you, this means a lot!
Great video, I find your channel a great new resource for staying up-to-date with CSS, along with the likes of Kevin Powell. Keep up the great work Dmitry 👊
Thank you for the kind words!
@@dmtrmrvyou’re welcome 😊
Thanks so much for this. This is the kind of tutorial we need more of .
Polyfil - isn’t it the library that was flagged as malware in june 2024?
No, the issue was specifically with polyfill.io, a service for using various polyfills on your site. This doesn’t mean all polyfills are bad or dangerous. Ideally, you’d want to add polyfills as part of the build process and avoid relying on such services. But… this is another reason for considering graceful degradation and reducing potential points of failure or vulnerability in your app.
CSS @layer in theory has full support, but at least Opera MacOS doesn't support it at the time of this comment.
Precisely, on a high-traffic site, even a half-percent change can impact a significant portion of the user base. The point I wanted to make is that using cutting-edge features is fine if we can safely provide a fallback. However, if there’s no fallback option and the feature drastically changes the layout, I’d hold off. It still depends on the project, though.
This channel is going to grow to the moon!
This was a perfect summary of how I'd also suggest approaching this matter! Let me add another reason for using progressive enhancement (accepting slight differences in older browsers) instead of adding polyfills: Performance. Those on older browsers are likely to use older devices as well, so they would suffer the most from the added performance penalty of polyfills. Also, no user will ever compare a website/an app with the original design, it just has to work. But in rare cases, a polyfill may still be the way to go.
Yeah, performance is a big one for sure! And good point about focus on usability and that it “has to work”. Thanks for the comment!
This lends itself to a discussion about why graceful degradation might be preferred over progressive enhancement. If I understood correctly at 2:35, Dima prefers the former.
@@ontheruntonowhere The differences between the two are pretty blurry for me, I must admit that I tend to use both terms interchangeably most of the time. So do you add a cherry on top for modern browsers, or do you take the cherry away for less capable ones? The question is: Is the default the cake with or without the cherry? 😉
Yeah, I generally prefer graceful degradation because it focuses on the future. Building for the latest version of CSS and providing reasonable fallbacks for older browsers is better than building specifically for them. That said, it's highly contextual and depends on the specific case.
Cherry by default!
1. Using BEM in the first place... no one's doing that anymore. There are CSS modules and/or for web libs that have some kind of component templating syntax (vue, svelte, etc) most have the ability to locally scope CSS. Which means there's no need to use BEM or any other kind of baroque namespacing techniques for styles anymore, the tooling + sourcemaps should take care of everything. 2. SCSS shouldn't be used anymore if you setup postcss correctly (and/or lightning CSS when it gets more mature). Maybe the one thing that's easier for sass is editor tooling, but it's not like postcss is unusable. 3. The ampersand **is** used in valid CSS syntax, but has varied support since the spec for nesting keeps changing. This is a much more concrete reason not to use ampersand if using scss, it gets real confusing having to mentally switch between ampersand use in scss vs css.
I remembered to use margin-trim today but it didn't work, so I came back to your video to see if I'd done something wrong only to find out that it was an experimental feature 🥲 tysm for covering it and hope to see more tips and tricks soon!
Yeah, we have to wait for this one. Hope we'll see more support soon.
you get a thumb up from me for the margin on blocks. I have come to the same conclusion long time ago, but can't seem to explain it as good to my peers. And I have to admit, I still mess it up from time to time. My thumb up rule is: If it is inside the block - it is padding, if it is used for positioning - margin. BEM becomes very easy to grasp when one dives into the concept of Atomic design.
Yeah, those outside margins can really mess up reusability!
Avoid margin top and adjust that padding of the parent (keep this logic for all things). The small padding bottom is useful in many other cases too, plus the margin-top is bad approach in general - thats why most browser have larger “p” margin bottom at least larger if not only on bottom. h tags as well. It is also mentally closer to the paragraph expectation. Enter .. space below not on top of paragraph etc.
So here I was, watching this video and thinking to myself "let's watch something I already know", only to find out that I was completely unaware that you can add multiple background images and properties to an element. Great video!!
Thank you, glad you enjoyed the video!
Safari the first to adopt? 🤩
Yeah, quite unusual
Lol supported by safari first is a terrible idea. Safari and firefox are always behind on useful css changes.
i explore some BEM content in youtube. then I found your explanation is deeper. so thank you. keep up man.
Thank you, glad you liked the explanation!
Привет, классный контент, рад видеть коллегу из 74 региона)
Just use flex and gaps and you ll be happy man
Happiness is the journey, not just margins, flex, and gaps. 😉
flex col + gap?
Gap is a valid option for some layouts, not a replacement for margins though. See pinned comment.
Thank you, this helped me a lot. Please keep making more videos like these. 😄
Glad it helped! Thank you :)
@@dmtrmrv Hi, I have a request. Could you please make a video about the design tokens (such as --size-1) and the essential ones needed before starting a project? Also, could you create a video discussing the CSS reset you use? Thank you!
@adhipathis12 Thank you for the suggestion! I'll def make a video on design tokens. Stay tuned!
@@dmtrmrv thanks😀
There are so many solutions for this case. Why is this the next big thing?
Why don’t use margin-bottom? 2rem And the last one no one cares. Or last-child: 0
I semi-like new features in CSS. The reason why is every new feature require users to update their browsers. "Oh, there's a new cool feature with margins!" ends up me writing backwards compatibility code, 'cause that "new feature" covers X% of modern browsers, so there's even more code in my CSS file. I'd love to see a simple, yet - imo - powerful solution like jQuery has. One library that will cover most, if not every, feature without updating browsers, reseting selectors, so they'll have same values in every browser etc. One library that will tell browser how to render things. It won't be super required, since many browsers already have built-in features like "grid", "gap", etc., but things like "margin-trim", "container queries", "viewport units" etc. and many, many more will actually work even on older browsers, up to IE11 (same as jQuery, i believe).