Установка верхнего и нижнего полей p как 0 не работает

#html #css

#HTML #css

Вопрос:

Я хотел бы установить поля (верхнее и нижнее) для p как 0, но это не работает! Скриншот ниже. Что я делаю не так? Заранее спасибо.

введите описание изображения здесь

 .conD .grid .text p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}  
 <section class="conD">
  <div class="container">
    <div class="heading">
      <p class="title">Companies
        <p>
          <p class="intro">Our portfolio is stacked with companies focused on impacting <br> the next generation consumer.
          </p>
    </div>
    <div class="grid">
      <article>
        <a href="#">
          <div class="photo" style="background-image: url(img/Feals.jpg);"></div>
          <div class="text">
            <p>nnana</p>
            <p>nana</p>
            <p>windy</p>
          </div>
        </a>
      </article>
    </div>
  </div>
</section>  

Комментарии:

1. Приведите рабочий пример. поскольку возможна высота строки или отступ, который «выглядит как» поле

2. Не могли бы вы, пожалуйста, поделиться более css?

3. Можете ли вы закрыть свой p тег и проверить. Этот p тег не закрыт <p class="title"> Companies

Ответ №1:

Вы не сможете заставить эти буквы «касаться», потому что расстояние, на которое вы (вероятно) ссылаетесь, относится к высоте шрифта. Таким образом, при разных шрифтах, рендеринге шрифтов, размерах шрифтов и, возможно, даже в зависимости от dpi устройства эта высота будет немного отличаться. таким образом, даже margin-top: -.23434564352343em (или что-то еще) не даст вам точных измерений. Я бы проверил, работает ли

 .conD .grid .text p p {
margin-top: -.123em /* (or whatever suits you) */
}
  

или уменьшение высоты строки

 .conD .grid .text p {
line-height: .85 /* (or whatever suits you) */
}
  

Это будет так же хорошо, как и с CSS. Чтобы ограничить высоту точной высотой каждой буквы, вам нужно будет использовать javascript.