1

I'm trying to build a mock-personal project website, and have been running into a frustrating problem caused by a tiny amount of whitespace appearing between two sections (banana-image and blue background).

enter image description here

Everything I've seen on SO on this topic has been caused by margin/border issues, or by linebreaks in the HTML code. I've played extensively with both, and neither of these appear to be at the core of this problem.

Note that I've gone ahead and added a red border around everything to better understand the issue. It appears the whitespace problem is coming from the .welcome-container element, not from any actual whitespace between .welcome-container and #projects.

See the jsfiddle here: https://jsfiddle.net/s0urovkz/

Any help would be much appreciated!

Anthony S.
  • 361
  • 1
  • 11

2 Answers2

1

Adding display: flex to div with class welcome-section should fix your problem.

Working example: https://jsfiddle.net/wj04x672/2/

Other possible solution is to add font-size: 0 to the div with class welcome-section.

Working example: https://jsfiddle.net/wj04x672/9/

deepakchethan
  • 5,240
  • 1
  • 23
  • 33
  • Those both seem to work! Any reason why the `display: flex` solution works here? – Anthony S. Sep 27 '21 at 01:54
  • 1
    @AnthonyS. This is kind of weird issue where the inline-block elements add a space automatically and changing it to other display types like flex or grid would help overcome this - https://stackoverflow.com/questions/16678929/display-inline-block-what-is-that-space – deepakchethan Sep 27 '21 at 02:02
0

Use display: flex and use Flexbox to full use, You can check the properties from here https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

Or check from Inspect Element, to see actually what is causing a white-space. If it was a margin accordingly decrease or increase margin, etc etc.

DYNAMICMORTAL
  • 94
  • 1
  • 8
  • Practically speaking I've seen that in HTML if you leave a space between two div's it creates a space between them. It might be that too check that out. – DYNAMICMORTAL Sep 27 '21 at 03:12