圖像之間的差距

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 img's inline */ 
 
}

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

Answer 3

的差距可以在兩個圖像之間可以看出仍然按照這個截圖：

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