jqueryモバイルフレームワークを使用して、次のWebページについて構築しました。
http://manchestergardeningservices.co.uk/mob/about.php
要素の下の着色された段落を見てください<h1>。
「lime_tint」のクラスを持つ<p>要素内の要素が、コンテナとして機能しているこれを展開していないことが懸念されます。要素には、含まれる要素の上部と下部を確実に押し出すデフォルトの上部と下部のマージンがあります。<div><div><p>
たとえば、Google Chrome で段落要素を検査すると、次のスタイルが表示されます。私の理解では、 -webkit-margin-before と -webkit-margin-after を 1em に設定すると、含まれる div 要素が拡大され、段落要素の上下に余分な緑のスペースができるようになります。なぜそうではないのですか。
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}