Блог

Я использую bootstrap, и между изображениями есть этот пробел, который я, похоже, не могу удалить

Я попытался установить максимальную ширину, размер объекта и плавающий влево, а также удалить отступы

 <style>
    body {
        font-family: Arial, Helvetica, sans-serif;
        background-color: white;
    }
    .top {
        position: absolute;
        top: 0;
    }
    .imageStyle{
        height: 100%;
        width: 100%;

    }
    .c {
        background-color: black;
    }
</style>
  

     <div class="container-fluid top">
        <div class="row">
            <div class="col-7">
                    <img src="Images/Background.png" align="left" class="img-fluid float-left imageStyle back">
            </div>
            <div class="col-5 c">
            </div>           
        </div>
    </div>
  

Ну, col-* классы Bootstrap имеют встроенное заполнение ( padding-left: 15px , padding-right: 15px ). Вы можете удалить это заполнение, назначив класс px-0 ** в col-7 div.

** устанавливает padding-left: 0 и padding-right: 0

смотрите здесь: https://codepen.io/anon/pen/pBeMLy

Это источник вашей проблемы или у вас есть что-то еще на уме?

добавьте * в свой css, он выбирает все элементы в DOM, затем удаляет отступы и поля, добавив padding: 0; и margin: 0; , попробуйте заменить тег img тегом div, затем добавьте фоновое изображение в свой css.

 *{
  padding: 0; margin: 0;
}
.image-style{
  background-image: url("https://images.pexels.com/photos/1137745/pexels-photo-1137745.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 50vh;
}
.c{
  background-color: #000;
  height: 50vh;
}  

 <div class="container-fluid top">
  <div class="row">
    <div class="col-7 image-style">
      <!-- I M A G E -->
    </div>
    <div class="col-5 c">
    </div>           
  </div>
</div>  

Я использовал класс no-gutters в bootstrap