Q&A
「余白」とはどの部分のことでしょうか。スクリーンショットなどを使って具体的に説明してください。
現在ポートフォリオサイトをhtml.cssで作成しているのですが、わからないことがあります。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>yasshi-portfolio</title> 6 <link rel="stylesheet" href="styles.css"> 7 8 </head> 9 <body> 10 11 <div class="main1"> 12 <h1>yasshi-portfolio</h1> 13 </div> 14 <div class="main2"> 15 <ul> 16 <li>About me</li> 17 <li>Work</li> 18 <li>Skill</li> 19 <li>Contact</li> 20 </ul> 21 </div> 22 </body> 23</html>
CSS
1body{ 2 background-color: #a52a2a; 3} 4.main1{ 5 padding-top: 100px; 6} 7 8ul{ 9 font-size: 0; 10 11} 12 13li{ 14 display: inline-block; 15 width: 170px; 16 color: #fffaf0; 17 background-color: #000000; 18 font-size: 30px; 19 border: 1px solid; 20 border-color: #ffffff; 21 text-align: center; 22} 23
main1の上パディングを１００pxに調整したいのですが、下記、図のように一緒にmain2の方も動いてしまいます。
どうすれば、別々に余白を調整することができますでしょうか？ご教示願います。
質問再編集しました。よろしくお願い申し上げます。
画像などで、出力したいレイアウトを作成してご提示ください。
現在、main1のdivの下に、main2のdivが出力されているので、main2の上余白が増えている訳ではありません。
自己解決
