图像之间的差距

Question

我试图将两个图像合并在一起，所以他们制作一个，我使用的是PHP，但我相信我可能遇到的问题是在bootstrap中。代码如下，但根据我附上的图像，我在图像之间得到了一个间隙......

问题的形象可以在：http://www.madeinbritain.co.nz/wp-content/themes/afish/images/issue.jpg看到

代码如下，问题代码靠近底部：

<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>  

有人可以提供帮助吗？

Answer 1

一种解决方案是将font-size:0px设置为图像的父级，这将删除父级下图像之间的空间。

.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>

参考文献：

1. Remove Space

Answer 2

另一种方法是使用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>

Answer 3

根据此屏幕截图，两个图像之间仍可以看到差距：

http://www.madeinbritain.co.nz/wp-content/themes/afish/images/screen.jpg