flexアイテム自身ではなく、その子要素にpaddingをつけるとは？

Question

＞＞＞
flexアイテム自身ではなく、その子要素にpaddingをつけるようにすれば良いかと思われます。

https://teratail.com/questions/46636の続き

https://jsfiddle.net/u9dL5fxd/17/
の

<header class="header" role="banner"> と 中身のコンテンツとの間にpaddingを入れたい場合、 具体的にどこにpaddingを入れるとよいということでしょうか？ つまり中のコンテンツの周りにホワイトスペースを作るためにpaddingを入れているということです。

.header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
より<header class="header" role="banner">の子要素がフレックスアイテムなので、

<div class="company-introduction-wrap">と<div class="main-copyright-wrap">がフレクスアイテム となるはずなのでそのさらに子要素にpaddingをつけるということですか？

Comments

[aKusano]

質問の前に実際に試してみましたか？

[退会済みユーザー]

＞＞＞
質問の前に実際に試してみましたか？

試してみたいのですが、jsfilderの例だとどの要素にpaddingを加えるか教えてもらった情報だとわからないということです。
それがわかれば行います。
具体的にどの要素か教えてもらえませんか？

[aKusano]

これだ、と思ったものにつけてみて結果を確認すれば良いのでは？
うまく行かなかったら他に要素につけてみてまた確認する。
実証した結果と、教えてもらった内容に矛盾があるようだったら、なぜそうなるのかを一旦検索等して調べてみた上で再度質問する、というくらいのことはしてみても良いと思いますよ。みんながみんな「正解」を知っているわけではありませんし、仕様と実装に食い違いがあることもままありますので。

なお「flexアイテムの子要素」と言ったら質問者さんが「これかな？」と思っているもののことを指しますね。普通に考えれば。

[退会済みユーザー]

<div class="company-introduction-wrap c-section-padding">の中にはhタグなどラップではない要素しかありません。
headerにつければ下記のように背景が当然なくなります。
https://jsfiddle.net/u9dL5fxd/19/

もう一つdivを中につくってそこにpaddingをつければできるでしょうが、雇用外はそのことを言っているのですか？

[aKusano]

雇用外ってなんですか？

[退会済みユーザー]

flexアイテムの子要素とは もう一つdivを中につくることという事ですか？

[aKusano]

ずっとそう言っているつもりですが・・・

[退会済みユーザー]

もう一つdivを中につくるなど、記載はないわ

[aKusano]

もうひとつdivを作ることなのか？と思った時点でなぜ実際にdivを入れてテストしてみよう、というところまで至らないのか疑問です。答えまでほぼたどり着いているように見えましたので「試してみては？」と促してみたのですけどね。