Unwanted Space for Inline Elements within Block Element

Design help General
1

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

|500xauto
|500xauto1440×807 255 KB

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) :

|400xauto
|400xauto1429×797 40.6 KB

&

|400xauto
|400xauto1440×802 147 KB

It’s still under progress, but in my “progress” I’ve find something that I can’t wrap my head around really…

|400xauto
|400xauto1440×802 161 KB

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

I mean look at this :

|400xauto
|400xauto1607×900 224 KB

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

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…

1 Like
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

2 Likes
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