Basically, I have a list of
tags from a WYSIWYG editor that have a margin-bottom of 20px. However, if the sibling of the
tag has an tag, I would like to remove that margin so that the tag can set the margin. How would I do this?
This is my styling
.wysiwyg {
p {
margin-bottom: 20px;
}
}
Basic markup
<div class="wysiwyg">
<p></p>
<p></p>
<p></p>
// Styling must stop here so that there is no bottom margin from the first above <p> tag
<img />
<p></p>
<p></p>
<p></p>
</div>
You can use tilde ~, it will select all element after the current selector, and then reset the rule of all p after the img:
.wysiwyg {
p {
margin-bottom: 20px;
}
img ~ p {
margin-bottom: 0;
}
}
Here a demo
.wysiwyg p {
margin-bottom: 20px;
background-color: red;
}
.wysiwyg img ~ p {
margin-bottom: 0;
background-color: transparent;
}<div class="wysiwyg">
<p>1</p>
<p>2</p>
<p>3</p>
<img />
<p>4</p>
<p>5</p>
<p>6</p>
</div>More information can be found here
Just set a negative margin-top for img tags that are preceded by a p tag:
.wysiwyg {
p {
margin-bottom: 20px;
}
p + img {
margin-top: -20px;
}
}