Extra space in Flexbox

HTML & CSS
1

Here is an older link to my project: https://codepen.io/bmcdesign/pen/OJMwRxV
I’ve made a lot of progress since then. :slightly_smiling_face:

This is probably very simple, but how do I get rid of the space beneath the large image on the left?

I can’t just give the container an exact height because I need the Flexbox flow when lowering the screen size. I tried changing the padding, but no luck. I do want extra space around the image when lowering the screen size, but not on the initial screen.

Hope that made sense! Thanks.

2

The space is because the image is an inline object and so resides on the baseline of the text-line.
To remove the space below you could either give it vertical-align bottom or display it as a block:

#drawer-img {
    width: 230px;
    height: 230px;
    vertical-align: bottom; /* either this */
    display: block;  /* or this */
}
3 Likes
3

That makes sense. Thanks again!

4

One thing please, when you use e.g. CodePen or JsFiddle or the like, you should not paste the whole web page in the html panel.

The correct way to use those services is to paste only the html that is between the body tags in the HTML panel and the css in the style tags in the CSS panel. Eventual Javascript in the JS panel.

As you did this time, the code was too awkward to debug. I used the browser’s inspect tool to find the css rule targeting the image instead of browsing through the whole page code.

3 Likes
5

Sure, no problem.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.