0

I have 2 images, only the first image is visible, on hover a menu-bar will slide to the right and then it shows the 2nd picture right next to the 1st image, but there is a little space between the images. Is there a way how I can fix this?

This is the HTML code I have:

<!-- Side Header -->
<div class="side-header side-content bg-white-op">
    <a class="h5 text-white" href="index.html">
        <i><img src="assets/img/test.png" height="25px"></i> <span class="sidebar-mini-hide"><img src="assets/img/logo.png" height="25px"></span>
    </a>
</div>
<!-- END Side Header -->
Magus
  • 14,796
  • 3
  • 36
  • 51
Lesley Peters
  • 409
  • 1
  • 5
  • 20
  • 9
    I know I'm stupid, there is a space between the code... – Lesley Peters Oct 23 '15 at 14:33
  • 2
    ...and inline elements are affected by whitespace. – Paulie_D Oct 23 '15 at 14:38
  • 2
    Anyway, your IDE or code editor could add some whitespaces on autoformatting. So, you'd better foresee that in CSS by `font-size: 0;` for `a` element. But remember to set proper `font-size` values for inner `i` and `span`. – Vlad DX Oct 23 '15 at 14:40

1 Answers1

1
.side-header a i, .side-header a span { float: left; }
Viktor Maksimov
  • 1,465
  • 1
  • 10
  • 11