How do I put margin between images in container?

Question

0.00/5 (No votes)

See more:

I have been trying to put margin between my photos with no margin on the border.

This is my problem(I have been using floats not flex or grid because i am new to this)

Screen-Shot-2021-02-18-at-5-36-29-PM — ImgBB[^]

What I have tried:

Margin right moves it over the way i want it too but when it reaches close to the border. The photos drop to another line instead of lining up with the edge of the border

<section class="gallerycontain">
  <div class="wrapper">

    <div class="box">
    <img src="./img/dipesh-gurav-vWvEjapyEmA-unsplash_350x200.jpg">
    </div>

    <div class="box">
    <img src="./img/dipesh-gurav-vWvEjapyEmA-unsplash_350x200.jpg">
    </div>

    <div class="box">
    <img src="./img/dipesh-gurav-vWvEjapyEmA-unsplash_350x200.jpg">
    </div>

    <div class="box">
    <img src="./img/dipesh-gurav-vWvEjapyEmA-unsplash_350x200.jpg">
    </div>

    <div class="box">
    <img src="./img/dipesh-gurav-vWvEjapyEmA-unsplash_350x200.jpg">
    </div>

    <div class="box">
    <img src="./img/dipesh-gurav-vWvEjapyEmA-unsplash_350x200.jpg">
    </div>
    </div>
  </div>
</section>

.gallerycontain{
  width: 100%;
  height:400px;
  border: 1px solid black;
  margin-top:40px ;
}

.gallerycontain .wrapper{
  width:90%;
  height:400px;
  margin: auto;
  border: 1px solid red;

}

.box{
 display: block;
 width:32%;
 height: 200px;
 float: left;
 display:block;
 margin-right:1% ;
}


.box img{
   width:100%;
   height:95%;
}

Posted 18-Feb-21 11:56am

Shon Homezzz

Updated 19-Feb-21 4:44am

Add a Solution

Comments

Richard Deeming 19-Feb-21 10:40am

You have an extra closing </div> within your <section> element.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2021-02-19T04:44:00

Solution 1

Here's what you have at the moment: Edit fiddle - JSFiddle - Code Playground[^]

Here's what you get switching to Flexbox: Edit fiddle - JSFiddle - Code Playground[^]

CSS

.gallerycontain .wrapper {
    width: 90%;
    height: 400px;
    margin: auto;
    border: 1px solid red;
	display: flex;
	flex-wrap: wrap;
	gap: 1%;
}

.box {
	flex: 1 0 32%;
    height: 200px;
}

CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN[^]
A Complete Guide to Flexbox | CSS-Tricks[^]
gap | CSS-Tricks[^]

Posted 19-Feb-21 4:44am

Richard Deeming

Comments

Shon Homezzz 19-Feb-21 13:04pm

Do you have a solution that doesnt involve flexbox or grid? I am new to css

Richard Deeming 22-Feb-21 4:11am

Flexbox and grid layout are far simpler to comprehend than the hacks that were required before they existed.

About the best you could do would be to use the nth-child selector to remove the margin from every third element:

.box {
    display: block;
    width: 32.66%; /* (100% - 2%) ÷ 3 */
    height: 200px;
    float: left;
    display: block;
    margin-right: 1%;
}

.box:nth-child(3n){
    margin-right: 0;
}

Demo[^]
:nth-child() - CSS: Cascading Style Sheets | MDN[^]

How do I put margin between images in container?

1 solution

Solution 1

Add your solution here

Preview 0

How do I put margin between images in container?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us