Почему возникает пробел между другими элементами, когда я добавляю изображение на панель навигации в HTML? ⇐ CSS

[Гость]

right now the HTML file gives me very weird issue when the image is added. When I remove the image, it returns to normal. I want to make the element alignment matches with the image.





body { margin: 0px 0px 0px 0px; } .top-navigation-bar { background-color: #5B9BD5; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); width: inherit; height: 50px; } .top-navigation-bar img{ margin: 0px; padding: 0; border-width: 0; width: auto; height: 100%; display: inline; } .top-navigation-bar button{ border-width: 0px; margin: 0px; padding: 0; background-color: inherit; padding-block: 0; width: 10%; height: 100%; border-style: none; display: inline; } .top-navigation-bar button text{ padding: 0; height: 100%; width: 95%; background-color: inherit; display: inline; } .top-navigation-bar button selected{ padding: 0; height: 90%; width: 5%; background-color: inherit; display: inline; } .top-navigation-bar button:hover selected{ padding: 0px 0px 0px 0px; height: 90%; width: 5%; background-color: black; display: inline; }

Home Contact Why DataPredict

Ah also, I was trying to make a black bar appear when the mouse hovers over it. So don't change that. But also I could not get that to work either, since it isn't appearing when I hover it. What exactly I'm missing here?


Источник: https://stackoverflow.com/questions/780 ... tion-bar-i