HTMLとCSS：パディングアシスタンス

私はHTMLとCSSを学んでおり、私が理解したものを使ってウェブページを構築しようとしていました。左上に作成しようとしている「このウェブサイト」ボタンに問題があります。私はそれが中心に置かれたい（水平に）ため、私は20px相当のトップパディング（50pxはコードの代表値）が必要です。この値を変更すると、外観には何の影響もありません。これをどうやって解決するのですか？ここにコードがあります。HTMLとCSS：パディングアシスタンス

<!DOCTYPE html> 
<html> 
<head> 
<style> 
* { margin:0;padding:0;} 
div.topbar { 
background-color: #f44336; 
height: 50px; 
} 
a.left-top-bar { 
background-color: #000000; 
color: white; 
font-size: 25px; 
padding-top:50px 
padding-bottom: 10px; 
font-family: ISOCPEUR; 
text-align: center; 
} 
nav.sidenav { 
background-color: #a4a4a4; 
width: 200px; 
height: 500px; 
padding-top: 15px; 
font-family: Calibri; 
color: white; 
font-size: 20px; 
float: left; 
text-align: center; 
line-height: 45px; 
} 
a.nav:link, a.nav:active, a.nav:visited { 
text-decoration: none; 
color: white; 
background-color: #949494; 
padding: 2px 10px 2px 10px; 
border-style: solid; 
border-color: #000000; 
border-width: 2px; 
border-radius: 10px; 
} 
a.nav:hover { 
text-decoration: none; 
background-color: #292929; 
} 

section.center { 
background-color: #000000; 
color: white; 
} 

a.topbar:link, a.topbar:visited { 
background-color: #f44336; 
color: white; 
padding: 14px 25px; 
text-align: center; 
text-decoration: none; 
display: inline-block; 
font-family: Calibri; 
} 

a.topbar:hover, a.topbar:active { 
background-color: red; 
} 
a.image:hover { 
background-color: red; 
</style> 
</head> 
<body> 
<div class="topbar"> 
<a class="left-top-bar">This Website</a> 
</div> 
<nav class="sidenav"> 
<a class="nav" href="https://www.wikipedia.org" target="_blank">Home</a><br> <a  class="nav" href="https://www.google.com" target="_blank">About Us</a> 

</nav> 
<section class="center"> 
<p>Information</p> 
</section> 


</body> 
</html>

出典

2016-05-31 Dhananjay Gupta

まず、あなたが作っている小さなミスを実現するために、勉強する必要があります！ GO GO GO – T04435

は、ここではより多くの方法でそれと研究を読んで、このバイオリンを私がやっていることですが、コピー以上でしたウェブサイトをHTML、CSSにする

div.topbar { 
    background-color: #f44336; 
    font-size: 25px; 
    height: 70px; 
    font-family: ISOCPEUR; 
    // remove next line to see the difference... 
    position: relative; //when element is relative positioned the childs will be constrained to the parent no to the body or greather relative parent 
} 

a.left-top-bar { 
    background-color: #0e0e0e; 
    color: whitesmoke; 
    padding: 20px; 
    position: absolute; // check if you need to add relative in the parent 
}

参照のための210

良いウェブサイトには、次のとおりです。

ここ

出典

2016-05-31 11:58:02 T04435

ありがとうございます。私はposition属性を先に使ってみましたが、それを取得できませんでした。私はそれをもう一度チェックし、それをより良く理解しようとします。 :) –

基本的に、以前は、パディングが適用されていましたが、それはトップバーの上にあるため表示されませんでした。 position：absolute属性を適用すると、左上のバーが上のバーに相対的な位置に配置されていることを確認しました。 –

あなたはそれに行きます。パディングは常に要素ボックスの内側にあり、マージンはその外側にあります。 – T04435

https://jsfiddle.net/xgofzs55/

私はあなたのため

使用

Position:absolute;

出典

2016-05-31 11:36:01 Boltz0r

HTMLとCSS：パディングアシスタンス

答えて

関連する問題