コードはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/help#about-markdown
また、タイトルは実際に起きている問題や実現したい機能など、質問内容に寄せた「要件」のみを記載してください。
前提・実現したいこと
imgの左側にmargin-leftを使わずに余白を作る方法はありますか。
発生している問題・エラーメッセージ
余白の作り方が間違っている。![イメージ説明](289bbbef38a325bd848f58e6bc2592c1.png)
該当のソースコード
/* CSSのリセット(消さないでください) */ html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, div { margin: 0; padding: 0; } body { font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; } li { list-style: none; } a { text-decoration: none; } /* ここからCSSを書いていきましょう */ header{ background-color:rgba(34,49,52,0.9); width:100%; height:65px; opacity:0.9; position:fixed; top:0; z-index:10; } .header-left{ float:left; display:block; margin-left:45px; } .header-left img{ width:124px; padding-top:20px; } .login{ background-color:rgba(255,255,255,0.3); float:right; line-height:65px; padding:0 25px; color:white; display:block; margin-right:45px; } .login:hover{ background-color:#c7c3c7; cursor:pointer; transition:all 0.5s; } .top{ text-align:center; background-image:url(https://prog-8.com/images/html/advanced/top.png); background-size:cover; } .top-title h1{ color:white; opacity:0.7; font-size:45px; font-weight:bold; letter-spacing:5px; padding-top:180px; } .top-title h2{ color:white; opacity:0.7; font-size:45px; font-weight:bold; letter-spacing:5px; } .p-1{ color:white; opacity:0.7; } .p-2{ color:white; opacity:0.7; padding-bottom:30px; } .top-btn{ opacity:0.8; color:white; display:inline-block; } .touroku{ background-color:#239b76; padding:8px 24px; display:inline-block; margin-bottom:15px; } .touroku:hover{ background-color:#239b00; cursor:pointer } .facebook{ background-color:#3b5998; padding:8px 24px; display:inline-block; margin-top:15px; margin-bottom:100px; margin-right:10px; } .facebook:hover{ background-color:#547fd9; cursor:pointer } .twitter{ background-color:#55acee; padding:8px 24px; display:inline-block; } .twitter:hover{ background-color:#70c1ff; cursor:pointer }
試したこと
margin-right
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー