100vw について

このトピックには1件の返信、2人の参加者があり、最後にinc2734により1年前に更新されました。

2件の投稿を表示中 – 1 – 2件目 (全2件中)

投稿者

投稿
2023年12月8日 12:35 PM #2659

koichi
閲覧者

♥ 0

「コンテンツサイズ」を、width: 100vw; に設定しても、実際には横幅いっぱいにはならず、傍に少し空白ができるようです。（screen shots 参照）

これは何が理由なのでしょうか？

参考

HTML:

<div class=”apple”><div>

CSS:

.apple {
background-color: green;
height: 64px;
width: 100%;
}

♥ 0

いいねをした人：いません

2023年12月8日 2:26 PM #2661
inc2734
参加者

♥ 4
デベロッパーツールで見ながら確認してもらうとわかりやすいかなと思うのですが、まず、管理画面で入力したコンテンツが表示されるコンテンツ部分は .entry-content.wp-block-post-content というdiv で囲まれており、これが左右にパディングを持っているために、コンテンツの最大幅が 100vw だったとしても、ページの左右に余白が確保される、ということになっています。

この .apple だけを全幅にしたいのであれば、.apple を、全幅にしたデコレーターブロックで囲ってみてください。

全ページのコンテンツ全てを全幅にしたいという場合は、.entry-content.wp-block-post-content の左右パディングを CSS で打ち消すのが簡単かもしれません。
```
.entry-content.wp-block-post-content {
  --unitone--gutters: 0px;
}
```
♥ 0

いいねをした人：いません
投稿者

投稿