Currently developing a small web application with multiple components. The backend functionality is all set, but encountering an unusual styling issue.
Specifically, noticing a white space appearing between each component without any clear reason. This gap only appears between certain components and not consistently across all divs.
The layout looks like this:
The spacing issue persists between each component, causing frustration. Tried eliminating imported CSS files and even removing components one by one, yet the problem persists.
App.JS, the primary file, contains numerous functions and components. Here's a snippet of what I'm returning:
App.JS:
return (
<div>
<NavBar
defaultAccount = {defaultAccount}
/>
<Landing
defaultAccount= {defaultAccount}
connectWalletHandler = {connectWalletHandler}
/>
<Form
optionValues = {optionValues}
removeFormFields = {removeFormFields}
handleOptionChange = {handleOptionChange}
addFormFields = {addFormFields}
setQuestion = {setQuestion}
handleSubmitPoll = {handleSubmitPoll}
/>
<Polls
pollList={pollList}
handleVote={handleVote}
/>
{errorMessage}
</div>
);
This situation is driving me insane. Anybody else encountered this before?
Struggling with debugging efforts - having removed CSS, individual components, and checked for whitespace within tags. Yet, the white space lingers stubbornly between each component.