2

Не могу убрать отбивку сверху у блока blockquote, нежелаемый отступ обведен на скриншоте синими овалом:

/* Убираем отступы у списка */

ul {
  padding: 0;
  margin: 0;
}


ol {
  padding: 0;
  margin: 0;
}


.content {
  width: 570px;
  height: 600px;
  background-color: yellow;
}


.content_image {
  margin-top: 50px;
  background-color: greenyellow;
}


.content_blockquote {
  background-color: red;
}


.content_quote {
  font-size: 28px;
  line-height: 42px;
  color: rgb(132, 132, 132);
}


.footer_quote {
  font-size: 16px;
  line-height: 42px;
  color: rgb(51, 51, 51);
  font-family: "Open Sans";
  font-weight: bold;
}


.content_title {
  margin-top: 50px;
  margin-bottom: 92px;
  font-size: 48px;
  line-height: 42px;
  color: rgb(51, 51, 51);
  font-family: "Open Sans";
  font-weight: bold;
}


.content_title_item {
  font-size: 19px;
  line-height: 32px;
  color: rgb(85, 85, 85);
  font-family: "Georgia";
}
<div class="content">
  <div class="content_image">
    <img src="images/quotes.jpg" alt="">
  </div>
  <blockquote class="content_blockquote">
    <p>
      <cite class="content_quote">
        "quote"
      </cite>
    </p>
    <footer>
      <p class="footer_quote">
        - footer
      </p>
    </footer>
  </blockquote>
  <h1 class="content_title">Some Title</h1>
  <p class="content_title_item">
    Some article
  </p>
</div>
<!-- content -->
Qwertiy
  • 123,725
deekee
  • 159

1 Answers1

1
  1. У цитаты есть свой margin - его надо обнулить
  2. В неё вложен p с marginом, поэтому надо избавиться от margin collapse.
.content_blockquote {
  background-color: red;
  margin: 0;
  overflow: hidden;
}

PS: https://ru.stackoverflow.com/a/714833/178988

/* Убираем отступы у списка */

ul {
  padding: 0;
  margin: 0;
}


ol {
  padding: 0;
  margin: 0;
}


.content {
  width: 570px;
  height: 600px;
  background-color: yellow;
}


.content_image {
  margin-top: 50px;
  background-color: greenyellow;
}


.content_blockquote {
  background-color: red;
  margin: 0;
  overflow: hidden;
}


.content_quote {
  font-size: 28px;
  line-height: 42px;
  color: rgb(132, 132, 132);
}


.footer_quote {
  font-size: 16px;
  line-height: 42px;
  color: rgb(51, 51, 51);
  font-family: "Open Sans";
  font-weight: bold;
}


.content_title {
  margin-top: 50px;
  margin-bottom: 92px;
  font-size: 48px;
  line-height: 42px;
  color: rgb(51, 51, 51);
  font-family: "Open Sans";
  font-weight: bold;
}


.content_title_item {
  font-size: 19px;
  line-height: 32px;
  color: rgb(85, 85, 85);
  font-family: "Georgia";
}
<div class="content">
  <div class="content_image">
    <img src="images/quotes.jpg" alt="">
  </div>
  <blockquote class="content_blockquote">
    <p>
      <cite class="content_quote">
        "quote"
      </cite>
    </p>
    <footer>
      <p class="footer_quote">
        - footer
      </p>
    </footer>
  </blockquote>
  <h1 class="content_title">Some Title</h1>
  <p class="content_title_item">
    Some article
  </p>
</div>
<!-- content -->
Qwertiy
  • 123,725