Can't understand this margin/whitespace

Hi, need help again :(.
I’m getting a margin at the bottom of every row in my inventory ( I’m not using a grid )

<div class="invWrapper">\
<div class="invItem">\
<<for $i = 0; $i < $Inventory.content.length; $i++>>\
<<set $inv = setup.gameInventory [$Inventory.content[$i]]>>\
<<print $inv.img>>\
<</for>>\
</div>\
</div>\

And I can’t for the life of me see why.
The CSS is like this…

.invWrapper {
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid white;
}
.invItem img{
  width: calc(20% - 2px); /* 20% of the wrapper - border */
  height: calc(20% - 2px);
  border: 1px solid #333333;
  padding: 0px;
  margin: 0px;
}

I’m guessing it’s white space but I can’t see why I’m getting it.

What happens if you put margin: 0 on the line above margin-left: auto? Does it have any effect?

Did you take a look at it in your browser’s inspection window? You might be able to figure out what’s happening by taking a look at the CSS that way.

If not, we’ll need a link to an actual HTML example of the problem so that we can look at the HTML and CSS for ourselves, since there’s likely other information there that we’ll need.

I’m only using 3 passages.
StoryInit

/****** PLAYER INVENTORY ******/
<<set $Inventory = {
	"content": [],
}>>


/****** INVENTORY ITEMS ******/
<<set setup.gameInventory = {
	"screwDriver": {
		"img" : "[img[screwDriver.png]]",
		"Name" : "Screwdriver",
	},
}>>

1st passage ( I add all the items here 16 total)

<<set $Inventory.content.push("screwDriver", "screwDriver", "screwDriver", "screwDriver", "screwDriver", "screwDriver", "screwDriver", "screwDriver", "screwDriver", "screwDriver", "screwDriver", "screwDriver", "screwDriver", "screwDriver", "screwDriver", "screwDriver", )>>\

<<goto "Inventory">>

And the last passage is this.

<div class="invWrapper">\
<div class="invItem">\
<<for $i = 0; $i < $Inventory.content.length; $i++>>\
<<set $inv = setup.gameInventory [$Inventory.content[$i]]>>\
<<print $inv.img>>\
<</for>>\
</div>\
</div>\

the CSS

.invWrapper {
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid white;
}
.invItem img{
  width: calc(20% - 2px);
  height: calc(20% - 2px);
  border: 1px solid #333333;
  padding: 0px;
  margin-left: 0px;
}

and this is the image
screwDriver

Think it was in inheriting line height from

.passage{
  line-height: 1.75;
  text-align: left;
  -o-transition:opacity .4s ease-in;
  transition: opacity .4s ease-in
}

Changed

.passage{
  line-height: .5;
  text-align: left;
  -o-transition: opacity .4s ease-in;
  transition: opacity .4s ease-in
}

but this messes up everything haha

Yeah. I figured out that setting line-height to 0 would fix it, but I didn’t think that was an ideal solution. However, after a bit of googling, apparently this is a known problem that I just have never come across. I generally only do strict text in my web pages and not images.

It looks like setting font-size: 0 is actually an even better solution than using line-height. I tested it and it works well.

Here’s a page I found on the subject: https://dev.to/christiankaindl/the-strange-img-gap-in-html

Edit: I see that you put the change in .passage. Heh. Don’t do it there. Put it in .invWrapper and you’ll get the desired effect for just the inventory.

1 Like

I did that haha thanks again

1 Like

Even better: After re-reading the page I linked, I saw that it says that you can set vertical-align: top on the image (in .invItem img) and it’ll fix the problem. I tested it and this also works.

I think this is the optimal solution because then if you want to put text or something in there for some reason or another, it won’t mess it up.

2 Likes

All 3 worked

font-size: 0;
line-height:  0;
vertical-align: top;

The last one is the best solution as it is more specific to the problem.