From the course: CSS: Images
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Getting rid of the space underneath an image
From the course: CSS: Images
Getting rid of the space underneath an image
- [Instructor] The image element is inline by default, and this introduces a weird little quirk that even seasoned developers run across all the time. It's important to understand what is happening, how to fix it, and also why this is happening. So let me walk you through all these steps here. The quirk is if you add an image inside another container as I've done here, so I have an image element, and it's inside a div. You'll notice there's a little space on the bottom underneath the image, and this is neither padding nor margin or anything else. And when you see this, the knee jerk reaction is always to say, oh, there's margin around the image, so I'll go to the image and say margin zero. You do that, nothing happens. Okay? So maybe it's padding inside the containing element. So I'll go to the containing element and say padding zero. Again, nothing fixes this problem. In fact, you can mess around with the image or…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
Modern image markup5m 55s
-
(Locked)
Getting rid of the space underneath an image4m 3s
-
(Locked)
Fitting an image inside any container5m 45s
-
(Locked)
Create a square (or other proportion) image5m 48s
-
(Locked)
Position an image inside a container3m 4s
-
(Locked)
Use CSS to crop an image3m 18s
-
(Locked)
Fitting an image inside a grid cell3m 8s
-
(Locked)
Fitting an image inside flexbox4m 38s
-
(Locked)
Fitting background images to any container2m 33s
-
(Locked)
Position background image within a container4m 55s
-
-
-
-
-