Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add space to left-right of the Web-Page using HTML/CSS

Tags:

html

css

web

enter image description here

I want to add space in the HTML document like the ones inside the orange rectangle. I don't know the technical term for what it's professionally called. Apologies.

like image 723
AppSensei Avatar asked Sep 14 '12 17:09

AppSensei


People also ask

How do I put spaces on the left side in HTML?

In the first section of the code, "margin-left: 2.5em;" adds a left margin of 2.5 em, which gives the appearance of indented text. As shown by the example, this spacing is outside of the border. In the next section, "padding: 0 7em 2em 0;" is defining the top, right, bottom, and left (clockwise) padding.

How do you add spaces to a website in HTML?

The simplest way to add a space in HTML (besides hitting the spacebar) is with the non-breaking space entity, written as   or  . Multiple adjacent non-breaking spaces won't be collapsed by the browser, letting you “force” several visible spaces between words or other page elements.

How do you add space to the right of an image in HTML?

Turn the image code to this: <img style="margin-right:20px;margin-bottom:16px;" class="alignleft src=[etc.]


2 Answers

If you are looking to center your web page and you are using a fixed width on your main container this can easily be achieved.

CSS

.container {
   margin:0 auto; /* this will center the page */
   width:960px; /*  use your width here */
}

HTML

<body>
    <div class="container">
      <!-- all your great content here -->
    </div>
</body>

If you need help applying this to your html/css please post your html and I would be glad to help you.

like image 196
Jrod Avatar answered Sep 19 '22 02:09

Jrod


Why not do this? :

<style type="text/css">
    html, body {
        margin: 0;
        border: 0;
        width: 100%;
    }

    body {
        padding: 0 20px;
    }

    #main {
        margin: 0 auto; /* in case you want to set a fixed width on this as well */
    }
</style>

<body>
    <div id="main"></div>
</body>

This way, depending on the width on the window, the main div will resize and there will always be a fixed space on both sides. If you want the main div have a fixed width and the spacing on the sides to be resized automatically, use the other solutions.

like image 42
Ian Avatar answered Sep 22 '22 02:09

Ian