Streaming live at 10am (PST)

Unwanted Space for Inline Elements within Block Element


#1

Hi! On this website I'm working on, for a friend of mine :

www.sara-architectur.webflow.com

On the "Universal Design" and the "Photography" pages, I'm trying to make this "project-overview-grid" -thingy. (And photo-grid) :

&

It's still under progress, but in my "progress" I've find something that I can't wrap my head around really...

↑ This as said weirdly appearing margin, isn't supposed to be there, as fair as I understand.

I mean look at this :

And the same margin settings goes for the boxes underneath...

I'm sure there is an all natural explanation to it, I just can't seem to find it smile
But I would really appreciate if someone would take a look at it, and if they could help me out smiley !

Here's the "Share Link" : Share Link: Sara Architecture

Would as said, really appreciate if someone could help me on it! smiley Btw. I know it isn't perfect or ideally css-formatted, but please forgive me for that. smiley

Cheers
Jonathan


Fixing an incomplete mobile scroll
#2

Hey @Jonatan_Ronsholdt try applying a left float to your s1, s2, and s3 classes. I think that will solve your problem let me know.


#3

It did! Thanks a lot!!! smiley @Davidn But why is it so grey_question


#4

@Davidn I don't know if you've noticed but this happens a lot lately, I mean this topic happens on the forum a lot. Today I read an article, and I should have bookmarked it, can't find it back, that was giving an explanation and some fixes. I don't remember the explanation but the fix works. Instead of giving up an inline-box property and having to rely on float (I hate floats for fixes), apply a small reset to the parent element: font size and line-height to zero... and it works! You may have to re set font size on some childs if there were inheritance, but I prefer that to the float fix, which does not work all the time without breaking a few things.

I HAVE to find the article back... but I was having a bit of a sick day and browsed the entire design planet on my phone...


#5

Found it:

http://demosthenes.info/blog/1009/Mind-The-Gap-Six-Causes-of-Unwanted-Spaces-In-Page-Layouts

@cyberdave I think it's a good read. I've seen the #3 issue quite a few times here: Cause 3: Inline Element Inside A Block Element


#6

That is an interesting read. I am going to have to play around in Webflow with this. Thanks for linking to it.


#7

I tried to reproduce it on a blank page but I didn't run into extra spaces on my blocks...


#8

Thanks @vincent, we will go through and add this to our knowledge store. Cheers, Dave


#9