CODEWITHSUNDEEP
htmlcss
JayPee
JayPee

Reputation: 21

Remove spacing between divs in CSS?

I am writing a div right now that will hold multiple lines of text but I need to remove the spacing after every text item. Is there a way to do this in CSS?

h3 {
    font-family: BelyDisplay;
    display: flex;
    padding: 0px;
    margin-left: 3rem;
    margin-right: 3rem;
    text-align: left;
    font: normal normal bold 25px/55px Montserrat;
    letter-spacing: 0px;
    color: #F0532D;
    opacity: 1; 
}

h4 {
    font-family: BelyDisplay;
    display: flex;
    padding: 0px;
    margin-left: 3rem;
    margin-right: 3rem;
    align-items: center;
    text-align: left;
    letter-spacing: 0px;
    opacity: 1; 
    font: normal normal bold 18px/22px Montserrat;
    color: #483735;

.role-text{
    font-family: Montserrat-Regular;
    margin-left: 3rem;
    margin-right: 3rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: left;
    letter-spacing: 0px;
    opacity: 1;
    font: normal normal normal 18px/22px Montserrat;
    color: #483735;
}
<div class="textbox">
  <span id="close" onclick="this.parentNode.remove(); location.reload(); return false;" class="btn btn-default large">
            <img src="/src/Esc X.svg" height="33" width="33"></img>
        </span>
  <h2>${roleTypes[role]?.title ?? 'none'}</h2>
  <div id="card-div">
    <p class="role-subtitle">${roleTypes[role]?.subtitle ?? 'none'}</p>
    <h3>CHARGE</h3>
    <h4>${roleTypes[role]?.chargesubtitle ?? 'none'}</h4>
    <p class="role-text">${roleTypes[role]?.chargebody ?? 'none'}</p>
    <h3>SCOPE</h3>
    <h4>${roleTypes[role]?.scopesubtitle ?? 'none'}</h4>
    <p class="role-text">${roleTypes[role]?.scopebody ?? 'none'}</p>
    <h3>FORECASTING</h3>
    <h4>${roleTypes[role]?.forecastingsubtitle ?? 'none'}</h4>
    <p class="role-text">${roleTypes[role]?.forecastingbody ?? 'none'}</p>
    <h3>COMMUNICATION + RESPONSIBILITY</h3>
    <h4>${roleTypes[role]?.communicationsubtitle ?? 'none'}</h4>
    <p class="role-text">${roleTypes[role]?.communicationbody ?? 'none'}</p>
  </div>
</div>

Currently the text shows correctly based on the XD I've been given from UX/UI but the text should be stacked on top of each other with no spacing between them.

Upvotes: 0

Views: 71

Answers (2)

tao
tao

Reputation: 90058

  1. You're missing the closing bracket of h4 {} (and I doubt you want to style h4 .role-text, since .role-text is a sibling of h4, not a descendant). If you don't close it, .role-text rules won't apply.
  2. You probably want to apply a top and bottom margin of 0 to h3, h4 and p.
    Most browsers apply vertical margins to them, via user agent stylesheet. There are various ways to disable those style rules (it's called a CSS reset), but I wouldn't recommend it, unless you know what you're doing and you want a completely clean slate. Most of them are decent defaults.

The following should have the desired effect (unless rules with selectors of higher specificity, which you haven't included in the question, are applying):

h3, h4 {
  margin: 0 3rem;
}
p {
  margin: 0;
}

Upvotes: 1

ChanHyeok-Im
ChanHyeok-Im

Reputation: 551

Is this what you want?

h3 {
    font-family: BelyDisplay;
    display: flex;
    padding: 0px;
    margin: 0;
    margin-left: 3rem;
    margin-right: 3rem;
    text-align: left;
    font: normal normal bold 25px/55px Montserrat;
    letter-spacing: 0px;
    color: #F0532D;
    opacity: 1; 
}

h4 {
    font-family: BelyDisplay;
    display: flex;
    padding: 0px;
    margin: 0;
    margin-left: 3rem;
    margin-right: 3rem;
    align-items: center;
    text-align: left;
    letter-spacing: 0px;
    opacity: 1; 
    font: normal normal bold 18px/22px Montserrat;
    color: #483735;

.role-text{
    font-family: Montserrat-Regular;
    margin-left: 3rem;
    margin-right: 3rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: left;
    letter-spacing: 0px;
    opacity: 1;
    font: normal normal normal 18px/22px Montserrat;
    color: #483735;
}
<div class="textbox">
  <span id="close" onclick="this.parentNode.remove(); location.reload(); return false;" class="btn btn-default large">
            <img src="/src/Esc X.svg" height="33" width="33"></img>
        </span>
  <h2>${roleTypes[role]?.title ?? 'none'}</h2>
  <div id="card-div">
    <p class="role-subtitle">${roleTypes[role]?.subtitle ?? 'none'}</p>
    <h3>CHARGE</h3>
    <h4>${roleTypes[role]?.chargesubtitle ?? 'none'}</h4>
    <p class="role-text">${roleTypes[role]?.chargebody ?? 'none'}</p>
    <h3>SCOPE</h3>
    <h4>${roleTypes[role]?.scopesubtitle ?? 'none'}</h4>
    <p class="role-text">${roleTypes[role]?.scopebody ?? 'none'}</p>
    <h3>FORECASTING</h3>
    <h4>${roleTypes[role]?.forecastingsubtitle ?? 'none'}</h4>
    <p class="role-text">${roleTypes[role]?.forecastingbody ?? 'none'}</p>
    <h3>COMMUNICATION + RESPONSIBILITY</h3>
    <h4>${roleTypes[role]?.communicationsubtitle ?? 'none'}</h4>
    <p class="role-text">${roleTypes[role]?.communicationbody ?? 'none'}</p>
  </div>
</div>

Upvotes: 0

Related Questions