質問: ### 前提・実現したいこと HTMLの勉強中、 display:blockとdisplay:inlineのちがいがわからず困ってしまいました。 ### 例 ※下記手本を見ながら学んでいるときにうまく理解できませんでした ``` Home News Contact About ``` ### 現在の理解 ・inlineの場合上下のpaddingができない 全くの初歩的な質問ですが、ご回答いただけますと幸いです。
回答: こんなところではないでしょうか。 display: blockの場合 ================== 1. width(横幅)とheight(高さ)が指定できる。 2. margin, paddingを上下左右に指定できる。 3. vertical-alignが指定できない。 4. ブロック要素の前後に改行が入るので、積み重なるように配置されていく。 display:inlineの場合 ================== 1. width(横幅)とheight(高さ)は指定できない。 2. marginが上下に指定できない(左右には指定できる)。 3. paddingは上下左右にかけることができる。 4. 要素の前後に改行が入らないので、横にどんどん追加されていく(ただし、画面の端までくるとそこで改行される)。 5. ブロック要素の中に配置できる(インライン要素にブロック要素を配置することはできない)。