カスケード画像間のスペースなし

Question

4つの画像を追加しましたが、それらを一緒にカスケードする必要はありません。それらの間にスペースが作成されます。下の画像のみが接続されますが、

HTML

<div class="content-box-left-bootomgrids"> 
    <div class="content-box-left-bootomgrid"> 

     <img src="images/room2.jpg" title="image-name" /> 
     <img src="images/Ocean.jpg" title="image-name" /> 
    </div> 

    <div class="content-box-left-bootomgrid"> 
     <h3>Welcome</h3> 
     <p><img src="images/room3.jpg" title="image-name" /> 
     <img src="images/garden.jpg" title="image-name" /></p> 
    </div> 

    <div class="content-box-left-bootomgrid lastgrid"> 
     <img src="images/room3.jpg" title="image-name" /> 
     <img src="images/exec.jpg" title="image-name" /> 
    </div> 
</div> 

CSS

.content-box-left-bootomgrids { 
    padding: 0em 0 0em 0; 
} 

.content-box-left-bootomgrid img{ 
    background:#FFF; 
    padding:0px; 
    display:block; 
    width: 93%; 
    transition: 0.5s ease; 
    -o-transition: 0.5s ease; 
    -webkit-transition: 0.5s ease; 
} 

期待される結果は、私が を必要とした後、私は210

Answer 1

このCSS/HTMLの組み合わせをお試しください。私は初心者が理解できるように書いています。また、さまざまなCSSプロパティについてもっと知る必要があります。

.content-box-left-bootomgrids { 
 
    width: 300px; 
 
    text-align: center; 
 
} 
 
.content-box-left-bootomgrid img { 
 
    width: 50%; 
 
    margin: 0; 
 
    float: left; 
 
}

<div class="content-box-left-bootomgrids"> 
 
    <div class="content-box-left-bootomgrid"> 
 
    <h3>Welcome</h3> 
 
    </div> 
 
    <div class="content-box-left-bootomgrid"> 
 
    <img src="images/room3.jpg" title="image-name" /> 
 
    <img src="images/garden.jpg" title="image-name" /> 
 
    </div> 
 
    <div class="content-box-left-bootomgrid"> 
 
    <img src="images/room2.jpg" title="image-name" /> 
 
    <img src="images/Ocean.jpg" title="image-name" /> 
 
    </div> 
 
    <div class="content-box-left-bootomgrid lastgrid"> 
 
    <img src="images/room3.jpg" title="image-name" /> 
 
    <img src="images/exec.jpg" title="image-name" /> 
 
    </div> 
 
</div>