Click here to Skip to main content
15,867,969 members
Please Sign up or sign in to vote.
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
Updated 19-Feb-21 4:44am
Comments
Richard Deeming 19-Feb-21 10:40am    
You have an extra closing </div> within your <section> element.

1 solution

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[^]
 
Share this answer
 
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[^]

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900