Как правильно убрать верхние и нижние отступы?
Есть следующие теги со стилями:
.content_text h1 {
margin: 25px 0;
font-weight: 800;
font-size: 30px;
line-height: 38px;
}
.content_text h2 {
margin: 25px 0;
font-weight: 800;
font-size: 24px;
line-height: 32px;
}
.content_text p {
margin: 15px 0;
}
.content_text ol {
margin: 15px 0 15px 30px;
list-style-type: decimal;
}
.content_text ul {
margin: 15px 0 15px 30px;
list-style-type: square;
}
.content_text img {
display: block;
margin: 25px 0;
width: auto;
max-width: 100%;
height: auto;
}
Каждый из этих тегов в произвольном порядке может быть вставлен в тег blockquote со стилями
.content_text blockquote {
margin: 25px 0 25px 13px;
padding: 10px 0 10px 15px;
border-left: 5px solid #e9eaec;
background: #f7f7f8;
}
Как правильно убрать верхний отступ у первого элемента, и нижний отступ у последнего элемента?
Делаю так, но не уверен в правильности решения:
.content_text blockquote h1:first-child,
.content_text blockquote h2:first-child {
margin-top: 0;
}
.content_text blockquote h1:last-child,
.content_text blockquote h2:last-child {
margin-bottom: 0;
}
.content_text blockquote p:first-child {
margin-top: 0;
}
.content_text blockquote p:last-child {
margin-bottom: 0;
}
.content_text blockquote ol:first-child,
.content_text blockquote ul:first-child {
margin-top: 0;
}
.content_text blockquote ol:last-child,
.content_text blockquote ul:last-child {
margin-bottom: 0;
}
.content_text blockquote img:first-child {
margin-top: 0;
}
.content_text blockquote img:last-child {
margin-bottom: 0;
}
Ответы (1 шт):
Автор решения: BlackStar1991
→ Ссылка
Если вам в принципе не важно с какого тега будет начинаться или заканчиваться структура в blockquote то это все можно б было сократить до
.content_text blockquote {
margin: 25px 0 25px 13px;
padding: 10px 0 10px 15px;
border-left: 5px solid #e9eaec;
background: #f7f7f8;
}
.content_text blockquote>*:first-child {
margin-top: 0;
}
.content_text blockquote>*:last-child {
margin-top: 0;
}
<div class="content_text">
<blockquote>
<h1>Text 1</h1>
</blockquote>
<blockquote>
<p>Text 2</p>
</blockquote>
<blockquote>
<h2>Text 2</h2>
</blockquote>
</div>