raulbaros raulbaros - 3 months ago 7
CSS Question

Set the margin or padding between two images next to eachother

I am trying to set the margin or padding between two image which are next to eachother, somehow the margin seems to be also 40%, namely the width of one image. How to set my own margin/padding between the images of lets say 2px???



.certifications, .car {
display:inline-block;
position:relative;
vertical-align:middle;
}

.certifications img {
max-width: 40%;
height: auto;
}

.car img {
max-width: 40%;
height: auto;
}

#wrapper.car {
max-width: 100%;
height:auto;
}

<div id="wrapper car">

<div class="car"><img alt=
"" src="http://lorempixel.com/100/100"></div>

<div class="certifications"><img alt=
"" src="http://lorempixel.com/100/100""></div>
</div>




sma sma
Answer

Change the inline-block to inline. Then you can add a margin for spacing:

.certifications, .car {
	display:inline;
    margin-right: 10px;
	position:relative;
    vertical-align:middle;
}

.certifications img {
    max-width: 40%;
    height: auto;
}

.car img {
    max-width: 40%;
    height: auto;
}

#wrapper.car {
    max-width: 100%;
	height:auto;
}
 <div id="wrapper car">
                        
                        <div class="car"><img alt=
                        "" src="http://lorempixel.com/100/100"></div>
					
                        <div class="certifications"><img alt=
                        "" src="http://lorempixel.com/100/100""></div>
                    </div>