

htmlを

[code]

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="test.css">
        <title>margin test</title>
    </head>
    <body>
        <div class="panel">
            <a href="#">要素1</a>
            <a href="#">要素2</a>
        </div>
    </body>
    </html>
    
[/code]

のようにし、cssを

[code]

    *,
    *:after,
    *:before{
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        margin: 0;
        padding: 0;
        -webkit-overflow-scrolling: touch;
    }
    html,
    body{
        position: relative;
        overflow-x: hidden;
        width: 100%;
        height: 100%;
        text-align: center;
        background-color: #f9f9f9;
    }
    h1{
        font-size: 2.5em;
        position: relative;
        transition: all .3s ease 0s;
        font-weight: lighter;
        font-family: 'arial';
        cursor: pointer;
    }
    p{
        font-size: 1.4em;
        font-weight: normal;
        font-family: 'arial';
        color: #333;
    }
    a{
        text-decoration: none;
    }
    
    .panel{
        position: absolute;
        width: 98%;
        right: 1%;
        left: 1%;
        min-height: 100%;
        padding: 1em;
        z-index: 2;
        background-color: #fff;
        border: 1px solid #e9e9e9;
    }
    
    .panel > a{
        text-decoration: none;
        font-size: 1.4em;
        font-weight: normal;
        font-family: 'arial';
        color: #333;
        border-bottom: 1.5px solid rgba(0,0,0,0);
        transition: all .4s ease 0s;
    }
    .panel > a:hover{
        border-bottom: 1.5px solid #333;
        transition: all .4s ease 0s;
    }
    
[/code]

のようにしたときに、margin-top,padding-top,top等が効かない原因がわかりません  
また、aの要素を縦並びにする方法も知りたいです


CC BY-SA 3.0
2016-12-30T06:59:31.490
31542
2017-01-30T05:29:46.843
2016-12-30T10:34:48.700
20058
20058
question
html css
cssのmargin,paddingなど、要素の位置を指定することができない原因がわかりません


こんにちは。

＞amargin,padding,top等が効かない原因がわかりません

ご提示いただいたファイルでテストしてみましたが  
a要素にmarginとpaddingは効きました。  
css自体は反映されていますでしょうか。

[code]

    <link rel="stylesheet" type="text/css" href="test.css">
    
[/code]

こちらのhrefという値をご確認ください。  
htmlとtest.cssが同じフォルダ内にあれば上記指定で大丈夫ですが  
さらに別のフォルダ内にcssが置いてある場合はパスが違っています。

回答の認識が違っていましたら詳しい状況を教えてください。

* * *

aの要素を縦ならびにする方法ですが  
縦のメニューなどによく使われるパターンとして

[code]

    <ul>
        <li><a href="">要素１</a></li>
        <li><a href="">要素２</a></li>
    </ul>
    
[/code]

というものがあります。

htmlのタグはinline要素とblock要素というのがあり  
横に並ぶか縦に並ぶかなどの特性が変わってきます。  
<http://www.htmq.com/htmlkihon/005.shtml>  
また上記のような特性だけでなく  
タグごとに使用用途が提示されているので  
タグを正確に使うことも重要だと言われます。


CC BY-SA 3.0
2016-12-30T08:11:53.357
31545
2016-12-30T08:11:53.357
19992
31542
answer