ホームページ >ウェブフロントエンド >htmlチュートリアル >要素に対するパディングの影響positioning_html/css_WEB-ITnose
要素に対するパディングの影響positioning_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:28:331742ブラウズ
要素の位置決めに対するパディングの影響:
パディングと位置の基本的な使用法はここでは紹介しません。関連する資料を参照してください。
関連書籍:
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 までご連絡ください。