Currently, I am utilizing Bootstrap 3.3 to create a straightforward layout, following this structure:
For the body and html elements:
html,body{
background: #fff;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
Additionally, on each child section, I have implemented the code below:
.section-name{
height:100%;
}
This ensures that every section occupies 100% of the device screen size. However, I am encountering an issue where there is a noticeable gap between each section, as illustrated in the screenshots below:
Take note of the spacing between sections, shown in another screenshot:
To troubleshoot, I inspected the development tools in both Mozilla and Chrome, looking for any excessive padding or margin problems, but found none.
I also considered whether whitespace within my HTML could be causing the problem, eliminated the whitespaces, and still encountered the same issue.
I removed all Bootstrap CDNs temporarily to rule out any potential Bootstrap-related issues, only to discover that it was not caused by Bootstrap, as the problem persisted even with custom CSS.
Furthermore, I attempted the following:
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
However, even this adjustment did not resolve the padding issue.