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.
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.
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.
Turn the image code to this: <img style="margin-right:20px;margin-bottom:16px;" class="alignleft src=[etc.]
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With