My blockquote is not referencing its parent

My blockquote is not referencing its parent
0

#1

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:


#2

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


#3

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


#4

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.