what is a reasonable solution to get gaps in-between specific elements? - html

Question

what is a reasonable solution to get a gap in-between these elements?
What my goal is to get a gap in between <h2>Subtitle</h2>, <h3>STARS, Tartopp Road</h3> along with the paragraph element.
I have already tried utilizing line break however it becomes too large leading me to use line-height or margin-bottom within <br/>.
...just to mention 'margin-bottom: -10px;' was used decrease the gapes between lines
I AM EXTREMELY SORRY STRUGGLING TO GET MY CODE ONTO BODY THEREFORE IM USING JSFIDDLE. LINK BELOW.
Im trying to get this layoutenter image description here

Answer 1

If I'm understanding the question correctly, margin-bottom will work just fine. The issue you may be running into here is that margins are collapsible. This means that when <h3> is directly below <h2>, only <h2>'s bottom margin is being rendered by the browser. When you remove <h2>'s bottom margin, the browser renders <h3>'s top margin, so the space between the elements doesn't change. What you have to do is remove <h3>'s top margin, then set <h2>'s bottom margin to whatever you want.
h2{
margin-bottom: 10px;
}
h3{
margin-top: 0;
}
<h2>Subtitle</h2>
<h3>STARS, Tartopp Road</h3>

Answer 2

grid-gap: 1em;
grid-gap is your friend here. You're using the display:grid system which allows you to specify the gap between elements consistently. After this gap you can format individual elements such as your p, h1, h2 selectors with more specific margin/padding/line-height to fit your needs.
Update: The image you provided shows your trying to achieve a different spacing which you could easily do without blanking out all the default margins and padding for the h1, h2, h3 and p elements in your CSS.
Here is a j-Fiddle with some adjustments and taking out the grid display system. Obviously it's a quick draft which needs small adjustments but let the semantics of your HTML control your structure:
<div class="grid-item-workshops">
<!--
Use header to group your headers together
so they can be easily formatted in your CSS
-->
<header>
<h1>WORKSHOP TITLE</h1>
<h2>Subtitle</h2>
</header>
<!--
Use a br in the midst of the h3 if you
want to keep these grouped as a sub-header with the date.
Or even better, use the <date> and <address> tags here
so you can format them separately. This has the nice
side effect smaller margins as they're not h3 tags.
-->
<date>25-29th July 2016</date>
<address>TARS, Topp Road</address>
<!-- Use paragraph here 👍 -->
<p>...</p>
<!--
This is not a header so lets make it
a <div> with a class that represents what it is showing
-->
<div class="price">£25 A DAY</div>
</div>
And here's some SASS in case the fiddle doesn't work in future:
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
width: 100%;
background: linear-gradient(90deg, ghostwhite 0%, rgb(255, 255, 255) 10%, rgb(255, 255, 255) 90%, ghostwhite 100%);
}
.grid-item-workshops {
background-color: #19252A;
background-size: cover;
background-repeat: no-repeat;
border-image-width: 100%;
border: none;
padding: 0.2em 1em;
color: white;
font-size: 1em;
font-weight: bold;
text-align: left;
height: auto;
header {
margin: 1em auto;
font-size: 1.2em;
line-height: 2em;
h1,
h2 {
margin: 0 auto;
color: cyan;
}
}
date,
address,
p {
font-family: 'Roboto', sans-serif;
}
.price {
font-weight: bolder;
font-size: 2em;
}
}

Answer 3

You can use grid-gap in your CSS. Something like this:
grid-gap: 15px;

Answer 4

Just remove the margin-bottom: -10px from your code and add grid-gap as per your need.