How to create consistent spacing between html elements? - html

Question

I am about to start a large, design oriented website that just has to be pixel perfect and as good as possible.
The problem is how to keep consistent spacing between elements in a container like this:
Currently I create all containers with
padding: 40px 40px 30px and every element with margin-bottom: 10px;
This solves the problem nicely, but every element, including headings, has to have exactly 10 pixels below itself and zero pixels above itself.
Currently I also use https://github.com/kiskadigitalmedia/kiskabricks_wedgecss (div with set height) to create additional vertical whitespace if the design calls for it. Like here:
This is the code for the above example:
<div class="card">
<h1>Heading 1</h1>
<p>Paragraph text</p>
<div class="wedge-2x">
<a class="btn">Button</a>
</div>
Does this approach make sense? Is there any better way to guarantee consistent spacing of elements inside a container? Any input appreciated.

Answer 1

I would do it like this:
<div class="card">
<h1>Heading 1</h1>
<p>Paragraph text</p>
<a class="btn">Button</a>
</div>
CSS:
.card {
padding: 40px;
box-sizing: border-box;
}
h1, p {
margin-bottom: 10px;
}
.btn {
margin-top: 20px;
display: inline-block;
}

Answer 2

If you want for example a 10 pixels margin above & below your elements, an option could be something like this. All the elements inside the class="card" will be affected by the same margins.
.card{
padding: 40px;
}
.card h1, .card p, .card .wedge-2x, .card a{
margin: 30px 0px;
}

Answer 3

It depends on how much flexibility you want to have.
your solution looks like a good start. maybe try and use siblings selectors too?
so in scss you'd have something like:
.card {
padding: 40px;
h1 ~ p,
h1 ~ a { margin-top: 10px; }
}
Or use + instead of ~ if you want a more specific HTML structure.
Or you could rewrite this using margin-top for all elements except for the first one, by using :first-child { ... }