[英]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.我现在正在编写一个包含多行文本的 div,但我需要删除每个文本项之后的间距。 Is there a way to do this in CSS?
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.目前,根据我从 UX/UI 获得的 XD,文本正确显示,但文本应堆叠在彼此之上,它们之间没有间距。
h4 {}
(and I doubt you want to style h4.role-text
, since .role-text
is a sibling of h4
, not a descendant).h4 {}
的右括号(我怀疑你想要设置h4.role-text
的样式,因为.role-text
是h4
的兄弟姐妹,而不是后代)。 If you don't close it, .role-text
rules won't apply..role-text
规则将不适用。0
to h3
, h4
and p
.0
的顶部和底部边距应用到h3
、 h4
和p
。 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;
}
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.