My blockquote is not referencing its parent

Hello guys, I’m trying to give my blockquote a margin on the top, but it’s taking the margin of the root document instead of it’s parent div

<div className="container">
  <blockquote>{this.state.quotation.content}</blockquote>
</div>

Look here, I’ve selected the blockquote but it’s going all the way to the top

And here, I’m selecting the parent div

How could I fix that?

Thanks for your time and help :slight_smile:

Hard to judge without any actual css. Going by the screenshots you don’t seem to have defined a margin for blockquote.

You can see the live application here https://elixir-oxyrus.c9users.io/ I want to give it a bit of margin at the top, but when I do it well, it does margin up to the top of the document, and not in base to its parent div

http://i.imgur.com/FEEgxuM.png

Margins of an element and its first child can collapse into one, that seems to be the case here. See Mastering margin collapsing on MDN for a more thorough explanation.
The easiest fix would be to use padding instead of margin for the blockquote, I think.

2 Likes