Empty space encompassing the entire sheet

While developing my website, everything seemed normal until I added a CSS document to my HTML page. Now, when we open the website , there is a white space around the entire page.

I attempted to set the body class to container-fluid since I am using Bootstrap, but that did not resolve the issue. I cannot identify anything in the CSS that could be causing this problem. Here is the code from the CSS:

body {
  padding: 100px;
}

.range { ... 
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b7b0e150b1509">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294b46465d5a5d5b4859691c0719071b">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div>HTML here please</div>
htmlcssbootstrap-5

Answer №1

Your body doesn't require such large padding.

Instead of using custom styles for padding, you can utilize Bootstrap classes like this: 

<body class="m-0 p-0">

body {
 /*  NOT REALLY necessary here:
  padding: 0;
  margin: 0;
  box-sizing: border-box;
*/
}

.my-content {
  border: solid blue 1px;
  background-color: #0000FF20;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a1baa4baa6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccaea3a3b8bfb8beadbc8cf9e2fce2fe">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<body class="m-0 p-0">
  <div class="my-content p-3">Let's do this!</div>
</body>

Answer №2

The body tag symbolizes the main content of an HTML document and there should only be one per document.

The padding area of an element is the gap between its content and its border.

If you add padding to the body using body { padding: 123px; }, you are instructing the browser to include a spacing of 123 pixels between the body's borders and its content.

An HTML element typically consists of content + padding + border.

padding: x applies x on all sides of the content. padding: x y applies x to the top and bottom, and y to the left and right. padding: w x y z applies w to the top, x to the right, y to the bottom, and z to the left.

You can also set them individually by using padding-top, padding-right, padding-bottom, and padding-left.

To eliminate the white space around the body, simply remove the padding property and its value from the body selector.

By default, no padding is applied to the body.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to eliminate the beforeunload event

The code below is used to display a default pop-up when the page is refreshed or closed: var myEvent = window.attachEvent || window.addEventListener; var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; /// make IE7, ...

javascriptjqueryhtml

Change the background color of the entire grid page to create a unique look

Is there a way to make the background color different for blocks 3 through 6 while maintaining a full-page background color effect without any padding or margin? .container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5%; ...

htmlcsscss-grid

Can jQuery UI modal dialog interfere with clicking events?

I am encountering an issue with a button that is supposed to display a popup when clicked. In my layout.jspx file, I have the following code: <div class="menuBtn"> <div class="search"> <span></span ...

javascriptjqueryhtml

What is the best way to alter the background-color of an element that is contained within a GatsbyJS component, depending on the specific page where the component is being utilized?

As a first-time GatsbyJS website builder, I am working on creating reusable components for my site. One of these components is the footer, and I have already structured it. Now, I have a dilemma - I want to change the color of a specific <div> within ...

javascripthtmlcssreactjsgatsby

How can I enable the "Open in a new tab" functionality while utilizing ng-click?

I've encountered an issue with my HTML table where each row is supposed to link to a different page, providing more detailed information. However, because I am using angularjs and utilizing ng-click on the rows, I am unable to right-click and select & ...

htmlangularjsangularjs-ng-click

Refreshing HTML tables with AJAX in Django

After going through all the posts here, I found that some are outdated and others don't quite match my issue. Apologies for bringing it up again. I have a basic HTML table with data in it. My goal is to update this data without refreshing the entire ...

htmldjangoajaxajax-updatedjango-3.0

What can be done to stop Bootstrap columns from shifting positions or stacking on top of each other unexpectedly?

I'm currently working on a testimonial section for my project. The challenge I'm facing is that the content within the 4 divs is not evenly distributed. As a result, when I try to adjust the width of the screen and expect them to align in a 2-2 f ...

htmlcsstwitter-bootstrap

Using Masonry with AngularJS templates: A step-by-step guide

Hey there! I'm trying to incorporate masonry into my AngularJS project. I'd like the divs to flow from left to right within their container. The documentation suggests using the following code: <div class="js-masonry" data-masonry-options=&ap ...

htmlcssangularjsjquery-masonry

When the browser tab icon does not appear, it is likely due to not responding to the GET /favicon.ico

I am running a web server for my basic HTML page that does not have a web icon included in the template. "HTTP/1.1 200 OK" Content-Type: text/html Connection: close <!DOCTYPE html> <html> <head> <met ...

htmlhttpfavicon

Transferring a PHP session variable to JavaScript in a separate file

I successfully imported data from a CSV file into PHP and organized it into a nested array. To ensure the data is easily accessible across different files, I stored the array as a session variable. Now, the challenge lies in accessing this session variable ...

javascriptphphtmlsession

Uninterrupted Horizontal Text Scrolling using Pure CSS

I am currently working on developing a news ticker that displays horizontal text in a continuous scrolling manner, without any breaks between loops. While I hope to achieve this using only CSS and HTML, I'm unsure if it's feasible. Here is my ini ...

htmlcss

``It has come to our attention that ALT texts are not displaying properly on popular email clients such as Outlook,

Despite following all the email standards and attempting to style the ALT tag, most major email clients do not display the ALT text when images fail to load. Is there a workaround for this issue or does it primarily depend on the specific email engine bein ...

htmlhtml-email

What is the best way to achieve a precision of 6 decimal places in JavaScript when working with decimals?

While working on coding to round numbers to six decimal places after performing some arithmetic operations, I encountered a problem. I was iterating through the elements of an array and conducting calculations based on the array contents. To achieve roundi ...

javascriptcssarraysdecimaltofixed

Managing modules within the node_modules folder that have dependencies on .css files

Currently, I am involved in a project where we are utilizing a custom UI library that includes some dependencies. These components come with their own corresponding .css files. The structure of the source code looks like this: |- src |-| |- components ...

cssreactjswebpackreact-starter-kit

Why is it that using div with a 100% width doesn't behave as one would anticipate?

Learning CSS has been an interesting journey so far. It's not always as intuitive as one might think, especially in web development. :) I recently attempted to create a simple, static progress bar using the following HTML file: <html> <he ...

htmlcsshtml-table

Why does the width of my image appear differently on an iPhone compared to other devices?

I recently encountered an issue with the responsiveness of an image on my website. While it displayed correctly on Android and desktop devices, the image appeared distorted on iPhones as if the CSS width attribute was not applied properly. This problem spe ...

javascriptcssreactjs

iOS now supports PowerPoint presentations through the use of the .pptx file format

Attempting to incorporate a pptx presentation with videos and animations into an iOS native app has proved challenging. Although UIWebView successfully renders the presentation allowing for slide browsing, it lacks interactivity such as button clicks that ...

ioshtmluiwebviewpowerpoint

Including CSS in an HTML file does not function properly

I've been attempting to import a CSS file into an HTML document, but for some reason it's not working. I have also tried linking the path directly, but that hasn't worked either. <!DOCTYPE html> <html lang="en"> <head> < ...

htmlcssimportstyles

Menu bar placed atop a carousel

I am currently in the process of developing a website and I have encountered an issue with the navigation bar. I have a slider that I would like to appear below the navbar but the navbar is pushing it down instead. Ideally, I want the navbar to be transpar ...

htmlcssnavbarbootstrap-4

CSS causing black bars to appear when image is moved

I recently started working with HTML/CSS and JS, but I've encountered a small issue. I'm using the bootstrap carousel and it's functioning well, but when I try to move the image higher up, black bars appear at the bottom as if my images are ...

htmlcssbootstrap-5carousel