infoMore than 5 years have passed since last update.
HTML の ブロック を インラインブロック に 変更 する
Last updated at Posted at 2019-07-14
目的
押さえるポイント
- HTMLの要素は3種類存在する。
- ブロック要素
width,heightの設定→〇
margin,paddingの設定→〇
配置→縦並び
- インライン要素
width,heightの設定→×
margin,paddingの設定→左右のみ〇
配置→横並び
- インラインブロック要素
width,heightの設定→〇
margin,paddingの設定→〇
配置→横並び
- インライン要素にwidth.heightを設定したいときは要素を変更する。
- 要素の変更にはdisplayプロパティを使用する。
書き方の例
要素の名前かクラス名 {
display: 変更したい要素;
}
より具体的な例(blockからinline-block)
- h1要素をinline-blockに設定する。
- 下記にHTMLファイルの内容を記載する。
h1 {
display: inline-brock;
}
より具体的な例(inlineからblock)
- p要素をblockに設定する。
- 下記にHTMLファイルの内容を記載する。
1Go to list of users who liked
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme
What you can do with signing up