CODEWITHSUNDEEP
htmlcss
happy days
happy days

Reputation: 13

How to create white space around entire page css

I'm very new to css and html and am trying to make it so all there is a bit of white space at the top, bottom, and both sides of my website (kind of like a border). I've found many questions of how to remove it, but not how to add it.

Currently if I use width, the right hand side of the element shrinks and doesn't expand with the page.

If I use the margin property only the left hand side of an element goes inside of the page.

Any help would be greatly appreciated.

Here is my code:

HTML -

*, *::before, *::after {box-sizing: border-box;}

* {
  margin: 0;
  padding: 0;
}

#heading {
  width: min(90%, 70.5rem);
  z-index: 1;
  width:90%;
}

.nav-list {
  position:fixed;
  width: 100%;
  display: flex;
  padding: 10px 10px;
  margin: 0 auto;
  justify-content: flex-end;
  align-items: center;
  box-shadow: 0px 0px 10px gainsboro;
  background-color:blanchedalmond;
}

.nav-item{
  list-style: none;
  padding: 10px;
  margin-right: 50px;
  font-family: Arial, Helvetica, sans-serif;
}

.nav-item a {
  text-decoration: none;
  color: black;
  overflow:hidden;
}

.nav-item:first-child{
  margin-right: auto;
}

#imgcontainer {
  overflow:hidden;
}

#bannerimg {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: 10%;
}

.intro{
  display:grid;
  grid-template-columns: 70% 30%;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.intro > div{
  background-color: grey;
  font-family: Arial, Helvetica, sans-serif;
  padding: 1em;
}

.intro > div:nth-child(odd){
  background: #ddd
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <header>
        <div id="heading">
            <navbar>
                <ul class="nav-list">
                    <li class="nav-item">
                        <h1>Rad Cafe</h1>
                    </li>
                    <li class="nav-item">
                        <a href="./index.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="./about.html">About</a>
                    </li>
                    <li class="nav-item">
                        <a href="./store.html">Store</a>
                    </li>
                </ul>
            </navbar>
        </div>
    </header>
    <div id="imgcontainer" class="container">
        <img id="bannerimg" src="./images/pexels-maria-orlova-4906513.jpg" alt="cafe">
    </div>
    <section class="intro">
        <div id="intro-grid-1" class="grid">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus deserunt obcaecati velit facilis a.
             Facere consequatur eaque beatae repellendus dicta! Maiores nulla recusandae fugit,
              nam illum soluta eius enim tenetur autem quia cupiditate ipsam tempora maxime tempore quos et veniam voluptatibus illo.
               Ratione cum sit, quia, beatae,
                minima sequi dolorem numquam ullam quidem incidunt quasi doloribus soluta vitae fugit amet quam suscipit repellendus delectus natus laudantium! Dolores, 
                quisquam maxime maiores reprehenderit optio at, voluptates aut provident est perferendis laborum rem!
        </div>
            <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil magni odit, id corporis dicta a,
                 inventore impedit quae neque obcaecati nulla itaque saepe quod dolorum. Ducimus nam iusto in nemo.
             </div>
             <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil magni odit, id corporis dicta a,
                inventore impedit quae neque obcaecati nulla itaque saepe quod dolorum. Ducimus nam iusto in nemo.
            </div>
            <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil magni odit, id corporis dicta a,
                inventore impedit quae neque obcaecati nulla itaque saepe quod dolorum. Ducimus nam iusto in nemo.
            </div>
        
    </section>  
    
</body>
</html>

Upvotes: 1

Views: 1460

Answers (4)

Zeeshaan Khan
Zeeshaan Khan

Reputation: 21

First of all, if you want to add white space to the whole page including the navbar, then just add this code: body { padding: 30px; }

Else, if you want to add white space to the items excluding the navbar then add this: section { padding: 30px; }

And, moreover your banner image is hid behind the navbar. You would also have to fix that.

Upvotes: 0

Karan Sharma
Karan Sharma

Reputation: 1

If you want to add white spaces around your website, simply use this code:

body{
   padding: 20px;
}

Upvotes: 0

PHP Geek
PHP Geek

Reputation: 4033

Replace your css with and try

 *, *::before, *::after {box-sizing: border-box;}

* {
    margin: 0;
    padding: 0;
}

#heading {
    width: min(90%, 70.5rem);
    z-index: 1;
    width:90%;

    
}
body{margin: 10px 10px 20px 10px;   }

.nav-list {
    position:fixed;
        width: 98.2%;
    display: flex;
    padding: 10px 10px;
    margin: 0 auto;
    justify-content: flex-end;
    align-items: center;
    box-shadow: 0px 0px 10px gainsboro;
    background-color:blanchedalmond;
  
}

.nav-item{
   
    list-style: none;
    padding: 10px;
    margin-right: 50px;
    font-family: Arial, Helvetica, sans-serif;
    

}

.nav-item a {
  
    text-decoration: none;
    color: black;
    overflow:hidden;
}

.nav-item:first-child{
    margin-right: auto;
}


#imgcontainer {

    overflow:hidden;

}


#bannerimg {

    box-sizing: border-box;
    
    width: 100%;
    max-width: 100%;
    max-height: 10%;
    
}

.intro{
    display:grid;
    grid-template-columns: 70% 29%;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.intro > div{
    background-color: grey;
    font-family: Arial, Helvetica, sans-serif;
    padding: 1em;
}

.intro > div:nth-child(odd){
    background: #ddd
}

Upvotes: 0

Lakshan Costa
Lakshan Costa

Reputation: 643

you can add margin to the entire body.

body {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 20px;
  margin-left: 10px;
}

Then you will get most parts with the space around the page. But I noticed you would have to add the margin-right as 20px insted of 10px. maybe it's because I'm using a online tool to see the page.

also you can change the nav-list to change the size of the nav-list added as 99% instead of 100% to get it aligned properly. you can probably tweak it a bit and get the way you wanted it to look

.nav-list {
    width: 99%;  
}

Upvotes: 1

Related Questions