user agent stylesheetの打ち消し

Question

chormeのuser agent stylesheetで、<blockquote>につくmarginを初期化したいのですが、うまくできません。
リセットcssを読み込んだりしたのですが、適応されず困っています。
お分かりになる方、ご助力をお願いいたします…！

下記html、cssをプレビュー（GoogleChrome）で確認したところ、

<blockquote>にmarginが設定されていました。

----------私のコード----------

<blockquote>
     <p>
     花子
     </p>
     <p>
　　　カンプ用テキストです。カンプ用テキストです。
     </p>
     <img src="sumple.png" alt="">
</blockquote>

    blockquote {
        margin: 0;
        padding: 0;
        background: #ffe5e5;
        font-size: 12px;
    }

私の方で設定した覚えがないので、Chromeの検証機能で確認すると、
user agent stylesheetというcssに記述されているmarginのようで、
そのcssはブラウザごとに設定されているデフォルトのcssという事が分かりました。
※以下のコードです
---------user agent styleshee-----------

blockquote {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}

上記の、
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
の部分を無効化したいです。

そこで、リセットcssを設定し、user agent stylesheetを無効化しようとしましたが、
反映されませんでした。

----------リセットcss----------

blockquote, q {
	quotes: none;
    margin: 0;
    padding: 0;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

そこで、加えてcssの<brockquote>にmargin:0;の記述をしましたが、やはりuser agent stylesheetの無効化はできませんでした。

user agent stylesheetはどのようにして無効化できるのでしょうか。

Comments

[kei344]

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を具体的に記述されたほうが回答を得られやすいと思います。

[oek]

アドバイスありがとうございます！順を追って具体的にご説明するよう修正しました。

[x_x]

再現しません。提示コードではわかりにくいと思うので背景色かボーダー付きのdivで挟んでpのマージンを消しておいてはどうでしょうか？

[oek]

ご回答ありがとうございます。blockquoteの中をdivで囲んだところ解消しました！

Answer 1

blockquote, q {
	overflow: hidden;
}

内包要素のmarginをblockquoteのものと誤解されているのでは？

Comments

[oek]

ご回答ありがとうございます。
すみません、自己解決方法を記載した後で拝見しています。
overflowについて調べてきました。
いろんな場面で使えそうなプロパティをご紹介くださりありがとうございます！
こちらも試してみます。

[kei344]

慣れるまではややこしいので「marginの相殺」で調べると良いです。

【CSS： marginの正しい理解 (CSSのmarginが難しい)｜Web Design KOJIKA17】
http://kojika17.com/2012/08/margin-of-css.html

Answer 2

HTMLを

<blockquote>
  <div class="inner">
     <p>
     花子
     </p>
     <p>
　　　カンプ用テキストです。カンプ用テキストです。
     </p>
     <img src="sumple.png" alt="">
  </div><!-- /inner -->
</blockquote>

とし、cssを

    blockquote {
        background: #ffe5e5;
        font-size: 12px;
    }

    .inner {
        padding: 30px 30px;
    }

としたところ解消されました。
ご回答くださった皆様、ありがとうございました。