CODEWITHSUNDEEP
htmlcsshtml-lists
Marcin Kordacki
Marcin Kordacki

Reputation: 21

Inheritance issue with <p> and <ul>

I want to force CSS to style each <p> element inside <p> element with a border. It works well till I get to a point where I have a <ul> inside my paragraph basically it just stops adding the style.

& > p {
   padding-left: 20px;
   border-left: 10px solid $headerGrey;
}

Now the only logical conclusion was adding a marker to this style:

& > p,ul {
   padding-left: 20px;
   border-left: 10px solid $headerGrey;
}

However I do get the border to my <ul>, there is a really nasty gap between <ul> and <p> elements.

Is there a clean solution for this one?

Upvotes: 0

Views: 249

Answers (2)

Marcin Kordacki
Marcin Kordacki

Reputation: 21

This is what worked for me.

 & > div {
      display: block;
      padding-left: 20px;
      border-left: 10px solid $headerGrey;
    }

So it works like that:

<div>
 <ul>
  <li> Point with border</li>
  <li> Point with border</li>
  <li> Point with border</li>
 </ul>
</div>

Upvotes: 0

Johannes
Johannes

Reputation: 67748

Both p and ul elements have default margins. Add this to avoid the gap between them:

p, ul {
 margin: 0;
}


p,
ul {
  background: #ccc;
}

ul,
p {
  padding: 20px;
}

.no_margin p, .no_margin ul {
  margin: 0;
}
<div>
  <p>p-tag with default margin</p>
  <ul>
    <li>li tag inside ul tag  with default margin</li>
  </ul>
</div>
<div class="no_margin">
  <p>p-tag with margin: 0</p>
  <ul>
    <li>li tag inside ul tag  with margin: 0</li>
  </ul>
</div>

Upvotes: 1

Related Questions