質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.58%

paddingが効いていない理由が分かりません

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 384

newyee

score 155

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta  charset="utf-8">
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="github.css" />
</head>
<body>
  <header>
    <div class="header_menu header_flex">
      <div>
        <a href="#">
          <svg class="githubIcon" viewBox="0 0 16 16" version="1.1" height="32" width="32" role="img"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>      
        </a>
      </div>
      <div class="search_box_wrap">
        <label class="search_label">
          <form action="#" method="get">
            <input id="search_box"name="serch" placeholder="Serch or jump to..." type="txt" />
          </form>
          <img class="search_img"alt="search_key_slash"src="img/search-shortcut-hint.svg">
        </label>      
      </div>
        <ul class="header_link header_flex flex_items_center text_bold">
          <li><a href="#">Pull request</a></i>
          <li><a href="#">Issues</a></li>
          <li><a href="#">Marketplace</a></li>
          <li><a href="#">Explore</a></li>
        </ul>

      <div class="nav_list">
        <ul class="user_nav">

          <li><a href="#"><svg class="header_nav_bell" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M13.99 11.991v1H0v-1l.73-.58c.769-.769.809-2.547 1.189-4.416.77-3.767 4.077-4.996 4.077-4.996 0-.55.45-1 .999-1 .55 0 1 .45 1 1 0 0 3.387 1.229 4.156 4.996.38 1.879.42 3.657 1.19 4.417l.659.58h-.01zM6.995 15.99c1.11 0 1.999-.89 1.999-1.999H4.996c0 1.11.89 1.999 1.999 1.999z"></path></svg></a></li>
          <li>
            <details class="header_left_dropdown">
              <summary> 
                <svg class="header_nav_plus float_left" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
                <span class="dropdown_caret"></span>
              </summary>
              <div>
                <a role="menuitem" href="#">New repository</a>
                <a role="menuitem" href="#">Import repository</a>
                <a role="menuitem" href="#">New gist</a>
                <a role="menuitem" href="#">New organization</a>
              </div>
            </details>
          </li>
          <li>
            <details>
              <summary class="avator">
                <img class="float_left" src="img/avatar.png" width=20 height=20 />
                <span class="dropdown_caret"></span>
              </summary>
              <ul>
                <li>
                  <a href="#">Signed in as<strong>USER NAME</strong>></a>
                </li>
                <li>
                  <a role="menuitem" href="#">Your profile</a>
                </li>
                <li>
                  <a role="menuitem" href="#">Your repositories</a>
                </li>
                <li>
                  <a role="menuitem" href="#">Your stars</a>
                </li>
                <li>
                  <a role="Your gist" href="#">Your gist</a>
                </li>
                <li>
                  <a role="menuitem" href="#">Help</a>
                </li>
                <li>
                  <a role="menuitem" href="#">Setting</a>
                </li>
                <li>
                  <a role="menuitem" href="#">Sign out</a>
                </li>
              </ul>
            </details>
          </li>
        </ul>  
      </div>
    </div>    
  </header>
  <div class="container">
    <div class="container_wrap">
      <h2 class="container_title">Learn Git and GitHub without any code!</h2>
      <p class="container_lead">Using the Hello World guide,you'll create a repository,start a branch,write comments, and open a pull request.</p>
      <a href="#" class="btn btn_green" target="_blank">Read the guide</a>
      <a href="#" class="btn btn_white" target="_blank">Start a project</a>

    </div>

  </div>



</body>

</html>
*{
    box-sizing:border-box;
}
.body{
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
   line-height:1.5;
}
.text_bold{
    font-weight:600;
}
.header{
    padding
}
svg {
    fill: currentColor;
  } 


.githubIcon{
    color:white; 
    margin-left:16px;
    margin-right:13px;
}
.search_img{
    position: absolute;
    top: 0;
    right: 0;
    margin:2px 2px;

}
#search_box{

    background-color:hsla(0,0%,100%,0.125);  


}   

details{
    position:relative;
}
summary + * {
    position:absolute;
    top:2em;
    right:0;
    padding:.5em;
    border:1px solid #000;
    background:#fff;

}
summary + * > * {
    display:block;
    padding:.2em;
    white-space:nowrap;
}


search_label{
    background-color:hsla(0,0%,100%,0.125); 
}

.search_box_wrap {

    position: relative;
}
.search_box_wrap label{
    background-color:hsla(0,0%,100%,0.125); 
}

.avator{
    margin-right:16px;
}


header{
    background-color:#000;
}
.header_link{
    font-size:14px;
}
.header_flex{
    display:flex;
    align-items: center;
}


.flex_items_center{
    display:flex;
    justify-content: space-between;
}
.flex_items_center a{
   text-decoration:none;
   color:#fff; 
}
.header_link{
    list-style:none;
    padding-left:8px;
}
.header_link li {
    padding: 0 8px;
}


.user_nav{
    display:flex;
    list-style:none;


}
.nav_list{
    display:flex;
    margin-left:auto;
}
.header_nav_bell{
    color:gray;
}
.dropdown_caret{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;   
    /*ブロック要素になっている為、inline-blockで横並びにする*/
    display: inline-block;
    margin-bottom:1.5px;
}
.header_nav_plus{
    color:#fff;
}
.user_nav svg,
.user_nav img {
    vertical-align: middle;
}

.container_wrap{
    width:50%;
    margin: 0 auto;
    text-align:center;
}

.container_title{
    font-size:30px;
    font-weight:400;
}

.container_lead{
    font-size:18px;
    color:rgba(27,31,35,0.7);
    margin-top:10px;
    margin-bottom:30px;
}   
.container{
    padding-top:70px;
    background-image:linear-gradient(180deg,hsla(0,0%,100%,0) 60%,#fff),linear-gradient(70deg,#dbedff 32%,#ebfff0);
}   
.btn{

}
.btn_green{
    text-decoration:none;
    padding:10 50px;
    color:"#fff";
    background-image:linear-gradient(-180deg,#34d058,#28a745 90%);
}
.btn_white{
    padding:10 50px;
    background-image:linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
}


上記コードのクラス「btn_green」にて設定したpaddingが、効いておらずデベロッパーツールで確認しますと、斜線が引かれています。
以下は上記コードを実行した際の画像になります。
イメージ説明

何故paddingが効いていないのか、どなたか教えてくだされば幸いです。よろしくお願いします

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

padding: 10 50px;となっていますが、長さには(0以外)単位が必須です。10px 50pxのように書く必要があります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/18 13:56

    解決しました!
    ありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る