要素に対するパディングの影響positioning_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

要素に対するパディングの影響positioning_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:28 AM

要素の位置決めに対するパディングの影響:
パディングと位置の基本的な使用法はここでは紹介しません。関連する資料を参照してください。
関連書籍:
1. パディングについては、CSS でのパディングの使用方法の詳細な説明の章を参照してください。
2. 位置についてはCSSのposition属性の章を参照してください。
本題に入り、パディング属性が位置決めに及ぼす影響を紹介しましょう。
コード例:
例 1:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.box{  width:300px;  height:150px;  background-color:#CCC;  padding:20px;}.inner{  width:50px;  height:50px;  background-color:red;  position:relative;  left:10px;  top:20px;}</style></head><body><div class="box">  <div class="inner"></div></div></body></html>

ログイン後にコピー

相対位置参照オブジェクトはそれ自体であるため、パディングの影響を受けません。
例 2:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.box{  width:300px;  height:150px;  background-color:#CCC;  padding:20px;  position:relative;}.inner{  width:50px;  height:50px;  background-color:red;  position:absolute;}</style></head><body><div class="box">  <div class="inner"></div></div></body></html>

ログイン後にコピー

絶対配置の場合、left または top 属性値が設定されていない場合、対応する方向でパディング値は無視されません。
例 3:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.box{  width:300px;  height:150px;  background-color:#CCC;  padding:20px;  position:relative;}.inner{  width:50px;  height:50px;  background-color:red;  position:absolute;  left:5px;}</style></head><body><div class="box">  <div class="inner"></div></div></body></html>

ログイン後にコピー

left および top 属性値が絶対配置の対応する方向に設定されている場合、対応する方向のパディングは無視されます。

元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=15476

詳細については、以下を参照してください: http://www.softwhy.com/divcss/

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。