Can't understand this margin/whitespace

#1

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.

Capture
Capture1100×930 56.5 KB

#2

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

#3

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.

#4

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

#5

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

#6

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
#7

I did that haha thanks again

1 Like
#8

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
#9

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.