Question 252332 in Html Question posted in
Some basic documentation can be found here.

Html – White space around the entire page

I was developing my website, that’s normally, but when I add a CSS doc in my html page, when we open website http://www.caiotoledo.com/, has a white space around the entire page.

I tried to set class body to container-fluid, because I’m using bootstrap, but that didn’t solve my problem. I can’t see anything that set this in the CSS, here is the code of CSS:

body {
  padding: 100px;
}

.range {
  position: relative;
  width: 70%;
  height: 1%;
}

.range input {
  width: 100%;
  position: absolute;
  top: 0.5px;
  height: 0.5px;
  appearance: none;
}

.range input::-webkit-slider-thumb {
  appearance: none;
  width: 15px;
  height: 15px;
  margin: -5px 0 0;
  border-radius: 50%;
  background: #135697;
  cursor: pointer;
  border: 0 !important;
}

.range input::-moz-range-thumb {
  width: 15px;
  height: 15px;
  margin: -5px 0 0;
  border-radius: 50%;
  background: #135697;
  cursor: pointer;
  border: 0 !important;
}

.range input::-ms-thumb {
  width: 15px;
  height: 15px;
  margin: -5px 0 0;
  border-radius: 50%;
  background: #135697;
  cursor: pointer;
  border: 0 !important;
}

.range input::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: #b2b2b2;
}

.range input::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: #b2b2b2;
}

.range input::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: #b2b2b2;
}

.range input:focus {
  background: none;
  outline: none;
}

.range input::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.range-labels {
  margin: -2.5% -6% 1%;
  padding: 0;
  list-style: none;
}

.range-labels li {
  position: relative;
  float: left;
  width: 11.95%;
  text-align: center;
  color: #b2b2b2;
  font-size: 14px;
  cursor: pointer;
}

.range-labels li::before {
  position: absolute;
  top: -23px;
  right: 0;
  left: 0;
  content: "";
  margin: 0 auto;
  width: 0px;
  height: 0px;
  background: #b2b2b2;
  border-radius: 50%;
}

.range-labels .active {
  color: #135697;
}

.range-labels .selected::before {
  background: #135697;
}

.range-labels .active.selected::before {
  display: none;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div>HTML here please</div>
Tags:

2

Answers


  1. 0

    No need for the large padding on the body you have.

    With bootstrap you can just set classes:
    <body class="m-0 p-0">

    body {
  /*  NOT REALLY even needed 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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">Here we go again!</div>
</body>
    Login or Signup to reply.
  2. 0

    The body element represents the content of an HTML document. There can be only one in a document.

    An element’s padding area is the space between its content and its border.

    If you apply padding to the body such as body { padding: 123px; } then you’re asking the browser to add 123 space in pixels between the body’s borders and its content.

    An HTML element is usually a box consisting of content + padding + border.

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

    You can also set them independently by calling padding-top, padding-right, padding-bottom and padding-left.

    Therefore to remove the white space around the body: Remove the padding property and it’s value from the body selector.

    There is no padding by default applied to the body.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search