Where Do You Put Your CSS Margins

Where do you put your CSS Margins?

I tend to use a bottom margin on elements when I want them to have space before the next element, and then to use a ".last" class in the css to remove the margin from the last element.

<body>
  <h1>This is the heading</h1>
  <p>This is a paragraph</p>
  <h1>Here's another heading</h1>
  <div class="last">This is a footer</div>
</body>

div { margin-bottom: 1em; }
p { margin-bottom: 1em; }
h1 { margin-bottom: 1em; }
.last {margin-bottom: 0; }

In your example though, this probably isn't that applicable, as a footer div would most likely have it's own class and specific styling.
Still the ".last" approach I used works for me when I have several identical elements one after the other (paragraphs and what-not).
Of course, I cherry-picked the technique from the "Elements" CSS framework.

Order of CSS margin

margin: top right bottom left //4 parameters 10px 12px 13px 15px
margin: top horizontal bottom //3 parameters 10px 12px 13px, gives left & right same margin of 12px
margin: vertical horizontal //2 parameters 10px 20px, gives 10px for top/bottom and 20px for left/right

What is the difference between `margin` and `padding` in CSS?

TL;DR: By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box.

To me, the biggest difference between padding and margin is that vertical margins auto-collapse, and padding doesn't.

Consider two elements one above the other each with padding of 1em. This padding is considered to be part of the element and is always preserved.

So you will end up with the content of the first element, followed by the padding of the first element, followed by the padding of the second, followed by the content of the second element.

Thus the content of the two elements will end up being 2em apart.

Now replace that padding with 1em margin. Margins are considered to be outside of the element, and margins of adjacent items will overlap.

So in this example, you will end up with the content of the first element followed by 1em of combined margin followed by the content of the second element. So the content of the two elements is only 1em apart.

This can be really useful when you know that you want to say 1em of spacing around an element, regardless of what element it is next to.

The other two big differences are that padding is included in the click region and background color/image, but not the margin.

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }div.padding > div { padding-top: 20px; }div.margin > div { margin-top: 20px; }

<h3>Default</h3><div class="box">  <div>A</div>  <div>B</div>  <div>C</div></div>
<h3>padding-top: 20px</h3><div class="box padding">  <div>A</div>  <div>B</div>  <div>C</div></div>
<h3>margin-top: 20px; </h3><div class="box margin">  <div>A</div>  <div>B</div>  <div>C</div></div>

CSS: How to add a margin to each middle element in a list?

Use gap, e.g.:

ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;        
}

gap basically puts a gap BETWEEN elements. Hence, no padding/spacing will be added above/below or to the left/right unless there is a neighbor item.

If you only need a gap between columns use column-gap or row-gap if only between rows.

In css when to use padding and when to use margin

This image can help you understand better.

Sample Image

How to margin the body of the page (html)?

For start you can use:

<body style="margin:0;padding:0">

Once you study a bit about css, you can change it to:

body {margin:0;padding:0}

in your stylesheet.

What is difference between CSS margin and padding?

In short padding make "space" inside your box, and margin do this outside of your box.

This picture explain it pretty good :)

Sample Image

Is there any specific way to set padding and margins?

Here are a few ideas that might be helpful.

margin: auto -> this can help you quickly center an element without too much hassle
flex and grids -> this answer might provide some useful links
check out different CSS units -> this answer gives a nice, brief overview
this might be beyond what you need, but if you need to do a calculation in CSS, there's a function for that -> calc()

Edit: margin-left: auto; and margin-right: auto; may be useful on their own too - you don't have to automatically set all margins.

Set a page margins

Okay, well number one your

div.document {
    width: {{ page_width }}px;
    margin: 0 auto;
}

is set to margin: 0 auto; which makes it centered so your page will be 940px and will be centered (Resizing your page will confirm this). You probably have to change your content width along with the wrapper width, but keep in mind that the amount of padding depends on how large your viewport is.

Alternate

If you just want to make it strictly 3cm on the left and right sides and make the content in the middle have a fluid layout you can do this:

        margin: 0 3cm;
        position: absolute;
        width: auto;

Where Do You Put Your CSS Margins