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ができない |
| 全くの初歩的な質問ですが、ご回答いただけますと幸いです。 |
