Kevin Powell - Community•6mo ago

My div is bigger than the icon inside of it

I want the red div to have the same size as my icon, but for some reason it has this 'margin'. I already tried to use inline-flex, but it didn't solve, my div becomes the same size as my icon, but the space is still there. This is my css:

&__top{
        background-color: blue;
        padding: 1.5rem;
        .icon-close{
            background-color: red;
            svg{
                background-color: green;
            }
        }
    }

&__top{
        background-color: blue;
        padding: 1.5rem;
        .icon-close{
            background-color: red;
            svg{
                background-color: green;
            }
        }
    }

Does anyone know how to solve this.

3 Replies

Lamer of Sweden•6mo ago

svg is an inline element as standard. Try display: block or rather use like in the img reset the vertical-align: middle; that should work as well. Kevin Powell - img reset https://www.youtube.com/watch?v=345V2MU3E_w

Kevin Powell

YouTube

A better image reset for your CSS

One of the most common resets in CSS is to set a max-width: 100% and a display: block on our images. In this video, I look at why it might also be a good idea to declare background-size, font-style, and shape-margin, among other things. 🔗 Links ✅ Harry Roberts post on Twitter: https://twitter.com/csswizardry/status/1717841334462005661 ✅ Harry'...

ἔρως•6mo ago

if i had to guess, .icon-close isn't an inline element if you want more information, please prepare a codepen or jsfiddle

Dracon•6mo ago

Hi @MuriloMatt Will you share your code with me, please? I will help you.

Gaming

Programming

My div is bigger than the icon inside of it