質問編集履歴

1 ```(バッククオート3つ)を追加しました。

bigin

bigin score 67

2017/01/24 12:46  投稿

display: block と  display: inline のちがい
###前提・実現したいこと
HTMLの勉強中、  display:blockとdisplay:inlineのちがいがわからず困ってしまいました。
###例 ※下記手本を見ながら学んでいるときにうまく理解できませんでした
```  
<!DOCTYPE html>
<html>
<head>
<style>
ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #333333;
}
li {
   float: left;
}
li a {
   display: block;
   color: white;
   text-align: center;
   padding: 16px;
   text-decoration: none;
}
li a:hover {
   background-color: #111111;
}
</style>
</head>
<body>
<ul>
 <li><a href="#home">Home</a></li>
 <li><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li><a href="#about">About</a></li>
</ul>
</body>
</html>
```  
 
###現在の理解
・inlineの場合上下のpaddingができない
全くの初歩的な質問ですが、ご回答いただけますと幸いです。
  • HTML5

    6246 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る