Gap in between images

Question

I am trying to merge together two images so they make one, I am using php but I believe the issue I might be having is within bootstrap. The code is below, but I get a gap between images as per the image I have attached...

Image of the issue can be seen at: http://www.madeinbritain.co.nz/wp-content/themes/afish/images/issue.jpg

The code is as follows, with the issue code near the bottom:

<header class="site-header" role="banner">
<nav class="site-navigation">
    <div class="container-fluid">
        <div class="row">
            <div class="site-navigation-inner col-sm-12">
                <div class="navbar navbar-default" style="position: relative; background-color: red;">
                    <div class="navbar-header">
                        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                            <span class="sr-only"><?php _e('Toggle navigation','_tk') ?> </span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                                        <!-- Your site title as branding in the menu -->
                                    <?php if ( get_theme_mod( 'andys_logo' ) ) : ?>
    <div class='site-logo'>
        <a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><img src='<?php echo esc_url( get_theme_mod( 'andys_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a>
    </div>
<?php else : ?>
    <hgroup>
        <h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a></h1>
        <h2 class='site-description'><?php bloginfo( 'description' ); ?></h2>
    </hgroup>
<?php endif; ?>

                    </div> 
                            <div class="getstartedn-wrap">
        <a href="#">
        <div class="nav-getstarted getstarted-button">GET STARTED</div>
        </a>
        </div>
                    <!-- The WordPress Menu goes here -->
                    <?php wp_nav_menu(
                        array(
                            'theme_location'    => 'primary',
                            'depth'             => 2,
                            'container'         => 'nav',
                            'container_id'      => 'navbar-collapse',
                            'container_class'   => 'collapse navbar-collapse',
                            'menu_class'        => 'nav navbar-nav',
                            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                            'menu_id'           => 'main-menu',
                            'walker'            => new wp_bootstrap_navwalker()
                        )
                    ); ?>
            <div style="overflow: hidden; width: 2500px; position: absolute; left: 50%; bottom: 0; margin-left: -1000px; height: 14px; z-index: 10000;font-size:0px;"><img src="http://www.madeinbritain.co.nz/wp-content/themes/afish/images/water-top.png" height="14px">
        </div>
                </div><!-- .navbar -->
            </div>
        </div>
    </div><!-- .container -->
</nav><!-- .site-navigation -->
</header><!-- #masthead -->

<div class="main-content">
<?php // substitute the class "container-fluid" below if you want a wider content area ?>
    <div class="container-fluid">
        <div class="row">
            <div id="content" class="main-content-inner col-sm-12 col-md-12" style="position: relative;">

    <div style="overflow: hidden; width: 2500px; position: absolute; left: 50%; top: 0; margin-left: -1000px; height: 14px; z-index: 10000; margin-top: 0px; padding-top: 0px;font-size:0px;display: flex;"><img src="http://www.madeinbritain.co.nz/wp-content/themes/afish/images/water-bottom.png" height="14px">
        </div>

Can anyone provide assistance?

You didn't include the image. And you also should include only the *relevant* code in your answer, see [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — FluffyKitten, Oct 18 '17 at 04:42
Could you remove all unnecessary code? And the image link is not working. — Cons7an7ine, Oct 18 '17 at 04:43

score 1 · Answer 1 · answered Oct 18 '17 at 04:47

1

One solution will be to set font-size:0px to the parent of the images, this will remove the space between the images under the parent.

.no-space{
  font-size:0px;
}

<div class="no-space">
<img src="http://lorempixel.com/200/200/"/>
<img src="http://lorempixel.com/200/200/"/>
<img src="http://lorempixel.com/200/200/"/>
</div>

References:

Remove Space

answered Oct 18 '17 at 04:47

Naren Murali

19,250
3
27
54

Thanks for this Naren, still has a small space though: http://www.madeinbritain.co.nz/wp-content/themes/afish/images/issue.jpg – Afisher Oct 18 '17 at 23:45
@Afisher As you may have heard, the gap is not easily noticed, please draw a box over the image and show the gap, then add some descriptive text with the actual issue! – Naren Murali Oct 19 '17 at 15:59
Sorry bit confused by what you mean, but I can repost the image, there is still a line in the middle – Afisher Oct 20 '17 at 02:17

VXp · Answer 2 · 2018-09-03T20:53:33.587

1

Another way of doing it is with the Flexbox:

.no-space {
  display: flex; /* displays flex-items (children) inline */
}

<div class="no-space">
  <img src="http://via.placeholder.com/200x200" alt="">
  <img src="http://via.placeholder.com/200x200" alt="">
  <img src="http://via.placeholder.com/200x200" alt="">
</div>

edited Sep 03 '18 at 20:53

answered Oct 18 '17 at 06:18

VXp

11,598
6
31
46

Gap in between images

2 Answers2