0

I have 4 images in a container. When I set the images to occupy 50% of the container, 2 stacks on top and 2 stacks on the bottom and it perfectly matches the edge on the container like I want. The problem occurs when I add margin. The images stack in one line meaning the margin made in too big for the container so they stack in one line

So I begin experimenting with decimals

I made the width of the images 49.5% and I set margin-right to 0.5%. The problem is the images on the right don't align with the container edge perfectly. There is still space on the edge and I cant add any more margin or width or else it stacks in one line because I am over 50%. Look at the blue part in the image.

My question I guess is how do I get the images to fit my container accurately. am I using the wrong units?

Picture of what I am talking about

enter image description here

.section1{
   width: 100%;
   height: 95vh;
   background-color:;


}

.section1 .wrapper{
   width: 94%;
   height: 600px;
    background-color: royalblue;

}

.section1 .card{
  float: left;
  width: 49.47%;
  height: 300px;
  margin-right: 0.53%;
  color:white;
}

.pizza{
   background: url(./img/main\ 1.jpg)no-repeat;
   width:100%;
   height: 100%


}

.burger{
   background: url(./img/main\ 2.jpg)no-repeat;
   width: 100%;
   height:100%;



}

.pasta{
   background: url(./img/main\ 3.jpg)no-repeat;
   width: 100%;
   height: 100%



}


.salad{
   background: url(./img/main\ 4.jpg)no-repeat;
   width:100%;
   height: 100%;



}
<div class="section1">
   <div class="wrapper">

  <div class="card">
    <div class="pizza">
    <div class="itembox1">
      <h1>PIZZA</h1>
    </div>
    </div>
  </div>

 <div class="card">
   <div class="burger">
    <div class="itembox1">
      <h1>BURGERS</h1>
    </div>
  </div>
</div>

 <div class="card">
  <div class="pasta">
    <div class="itembox1">
      <h1>PASTA</h1>
    </div>
   </div>
 </div>

 <div class="card">
   <div class="salad">
    <div class="itembox1">
      <h1>SALAD & FIT</h1>
    </div>
  </div>
</div>

  </div>
</div>
Ali Esmailpor
  • 1,209
  • 3
  • 11
  • 22
Shon Lucky
  • 3
  • 4

3 Answers3

1

You could use the :nth-child selector to only put the margin on the images that are first in the row. Example:

#image-wrapper *:nth-child(odd) {
    margin-right: 10px;
}
#image-wrapper > * { /* Select all direct children of image-wrapper */
    display: inline-block;
    width: calc((100% - 10px) / 2); /* set image width to the half of (the parent #image-wrapper minus the margin) */
    vertical-align: middle; /* to get rid of the extra vertical spacing */
}
#image-wrapper {
    background-color: blue;
}
<div id="image-wrapper">
    <img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Block-inline.png?uselang=en"><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Block-inline.png?uselang=en"><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Block-inline.png?uselang=en"><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Block-inline.png?uselang=en">
</div>

Sorry for the unformatted HTML, but if i would format it correctly the browser would add some extra space inbetween the images; you can read about how to have the HTML indented correctly while having no extra spaces here

TheEagle
  • 5,808
  • 3
  • 11
  • 39
  • Still didnt work. I dont think you understand my question. I want the images to fill the width of my container even if i add margin. Meaning no extra space on the edge. I used the blue to highlight the extra space – Shon Lucky Feb 13 '21 at 20:54
  • @ShonLucky could you maybe make a picture of what it should look like in the end ? – TheEagle Feb 13 '21 at 21:09
  • https://ibb.co/PmHCX9Q This is how is looks before adding margins. it fits the container exactly like i want. It aligns with the edges. When i add margin there is always this remaining space no matter what. it doesnt line up with the edge of the container. Think of it like dividing and always getting a remainder no matter what – Shon Lucky Feb 13 '21 at 21:36
  • *This is how is looks before adding margins. it fits the container exactly like i want.* @ShonLucky It's unclear why you're adding margins when you're getting the result you want without them. Generally you use margins to add space outside of an element's border. – BSMP Feb 14 '21 at 04:43
  • @ShonLucky please put a picture of how it is right now (you obviously already did that) and a picture of how you want it. – TheEagle Feb 14 '21 at 10:06
  • 1
    @ShonLucky do you want to have the images with space in between, but without space on the borders, or do you want the images to have no spacing at all ? If #1 is the case, my solution does exactly that, if #2 is the case, just set the `margin` to 0. – TheEagle Feb 14 '21 at 10:08
  • with space in between but no space on the border. Your solution confusing me a little. This is my first month on CSS – Shon Lucky Feb 14 '21 at 16:03
  • @ShonLucky my solution has space in between but no space on the borders. You can try it out by clicking the blue `Run code snippet` button. I used blue to highlight the space in between, simply remove `background-color: blue` from the css to get rid of that. – TheEagle Feb 14 '21 at 16:59
0

If i'm reading it correctly change this part to 100%.

.section1 .wrapper{
   width: 100%;
   height: 600px;
    background-color: royalblue;

}
Clive Atkins
  • 545
  • 4
  • 21
0

Add this to your CSS-Code:

* {
margin: 0;
padding: 0;
}
GucciBananaKing99
  • 1,473
  • 1
  • 11
  • 31