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 >
  <span id="close" onclick="this.parentNode.remove(); location.reload(); return false;" >
            <img src="/src/Esc X.svg" height="33" width="33"></img>
        </span>
  <h2>${roleTypes[role]?.title ?? 'none'}</h2>
  <div id="card-div">
    <p >${roleTypes[role]?.subtitle ?? 'none'}</p>
    <h3>CHARGE</h3>
    <h4>${roleTypes[role]?.chargesubtitle ?? 'none'}</h4>
    <p >${roleTypes[role]?.chargebody ?? 'none'}</p>
    <h3>SCOPE</h3>
    <h4>${roleTypes[role]?.scopesubtitle ?? 'none'}</h4>
    <p >${roleTypes[role]?.scopebody ?? 'none'}</p>
    <h3>FORECASTING</h3>
    <h4>${roleTypes[role]?.forecastingsubtitle ?? 'none'}</h4>
    <p >${roleTypes[role]?.forecastingbody ?? 'none'}</p>
    <h3>COMMUNICATION   RESPONSIBILITY</h3>
    <h4>${roleTypes[role]?.communicationsubtitle ?? 'none'}</h4>
    <p >${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.

CodePudding user response：

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;
}

CodePudding user response：

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 >
  <span id="close" onclick="this.parentNode.remove(); location.reload(); return false;" >
            <img src="/src/Esc X.svg" height="33" width="33"></img>
        </span>
  <h2>${roleTypes[role]?.title ?? 'none'}</h2>
  <div id="card-div">
    <p >${roleTypes[role]?.subtitle ?? 'none'}</p>
    <h3>CHARGE</h3>
    <h4>${roleTypes[role]?.chargesubtitle ?? 'none'}</h4>
    <p >${roleTypes[role]?.chargebody ?? 'none'}</p>
    <h3>SCOPE</h3>
    <h4>${roleTypes[role]?.scopesubtitle ?? 'none'}</h4>
    <p >${roleTypes[role]?.scopebody ?? 'none'}</p>
    <h3>FORECASTING</h3>
    <h4>${roleTypes[role]?.forecastingsubtitle ?? 'none'}</h4>
    <p >${roleTypes[role]?.forecastingbody ?? 'none'}</p>
    <h3>COMMUNICATION   RESPONSIBILITY</h3>
    <h4>${roleTypes[role]?.communicationsubtitle ?? 'none'}</h4>
    <p >${roleTypes[role]?.communicationbody ?? 'none'}</p>
  </div>
</div>