ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSのmargin-rightの無効性についての質問です。

CSSのmargin-rightの無効性についての質問です。

巴扎黑
リリース: 2018-05-28 11:33:01
オリジナル
3556 人が閲覧しました

margin-rightは実際には機能しますが、デフォルトが標準ストリームの場合、効果は表示されません。標準的な流れから脱却したらどうなるでしょうか?これを考えて、すぐに CSS ファイルに float:right; を追加したところ、テスト中に margin-right の効果が確認できました。 今日、グループ内で、CSS の margin-right が無効であることについて質問をした人がいました。 CSS コードと HTML コードは次のとおりです:

コードは次のとおりです:

.style1{ 
width:400px; 
height:440px; 
background-color
:red; 
border:5px solid silver; 
margin-top
:20%; 
margin-right:30%; 
}
ログイン後にコピー

コードは次のとおりです:

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head> 
<body> 
<p class="style1"><img src="bei.jpg"></p> 
</body> 
</html>
ログイン後にコピー

コードをコピーして画像に変更してみました。テストを行ったところ、実際に変更されました。働かないよ。

もしかして、そのトップは右の効果を隠してしまうのでしょうか?それとも順番の関係でしょうか?これらは後に間違った考えであることが判明しました。 w3school の margin-right に関する漠然とした記憶と組み合わせると、ブラウザはデフォルトで左揃えになります。インスピレーション後、実際に margin-right が動作しますが、デフォルトが標準フローの場合、効果は表示されません。標準的な流れから脱却したらどうなるでしょうか?これを考えて、すぐに CSS ファイルに float:right; を追加すると、テスト中に margin-right の効果が確認できます。

float:left を使用しても機能しません。デフォルトとほぼ同じです。
追記: right 属性が無効な理由について: right 属性は position が絶対値の場合にのみ有効で、デフォルトの位置値は静的であるため、right 属性は無効です。 right を使用できない場合は、right 属性を使用しないことをお勧めします。

以上がCSSのmargin-rightの無効性についての質問です。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート