Home > Net >  How to separate two images in the same row?
How to separate two images in the same row?

Time:07-10

do you know how to separate two images in the same row? Thank you so much for your help. I will post the image under this sentence.

Image

<div id="portfolio">
            <div >
                <div >

                    <div > 
                     <div >
                       <img  src="assets/img/szgrade/zgradaA.jpg" alt="..." />
                             <h2  style="color:white"> Zgrada A </h2>
                             
                     </div>
                     
                    </div>
                     <div > 
                     <div >
                       <img  src="assets/img/szgrade/zgradaB.jpg" alt="..." />
                             <h2  style="color:white"> Zgrada B </h2>
                     </div>
                    </div>
                 </div>
            </div>
        </div>

Css

.zgrade {
  position: relative;
  
  border: 1px solid #333;
  
  overflow: hidden;
  width: 745px;
}

.zgradeimg {
  width: 500px;  
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.zgrade:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.zgrade-txt {
  position: absolute;
   top: 250px; 
   left: 0; 
   width: 100%; 

Edit: Added CSS code, I tried adding br and span in HTML code.

CodePudding user response:

We could use simple css to add a margin to the element. This would create empty space between the elements. Add this to your external stylesheet or in your html file(best place is head):

<style>
    .img-fluid {
        margin-right: 20px;  /*feel free to change this to any amount*/
    }
</style>

or

style="margin-right:20px"

Margin is space outside of an element, which mostly acts like white space. It is counted in the element size but it is outside the border and background color does not effect it.

CodePudding user response:

I solved the problem, I increased w of the container from 75 to 80, but I needed to add a new class in CSS (that would be w-80).

  • Related