css 文章要素がdivから飛び出てしまう

html
1<div class="picinfo">
2        <div class="pic"><img src="./images/img-working.jpg" alt="働く"></div>
3        <div class="info"><h2>集中しよう</h2>
4
5          <div class="letter">
6        <p>集中は創造に直結します。<br>
7        WorkWithはあなたがクリエイティブに没頭できる場<br>所を提供するため、160人を収容可能な空間に趣の異<br>なる8種類のデスクとチェアを用意しました。<br>
8        今日の気分に合う場所がきっと見つかります。</p></div>
9        </div>
10      </div>
11```![イメージ説明](99b588fb645b076ded8e7f526de741ca.jpeg)
12
13画像のように文章が途中で飛び出してしまいます。箱の中におさめる方法が分かる方がいらっしゃればご教授いただきたいです。
14画像と文章合わせてpicinfoというクラスにしています。<P>で書かれた問題の文章部分の塊をdivとしクラスをletterと設定しています。
15
16
17### 該当のソースコード
18
19```css
20.picinfo {
21  display: flex;
22  height: 280px;
23
24}
25.pic {
26  width: 50%;
27  object-fit: cover;
28  height: 100%;
29  margin-left: 55px;
30  
31}
32.info {
33
34  background-color: #fffff3;
35  width: 50%;
36  height: 100%;
37  margin-right: 45px;
38
39} 
40.info h2 {
41  color: black;
42  font-size: 24px;
43  display: inline-block;
44  margin-left: 30px;
45  
46}
47.letter p {
48  display: inline-block;
49  font-weight: 350;
50  
51  line-height: 30px;
52}
53
54.letter {
55  display: inline-block;
56  padding-bottom: 30px;
57  font-weight: 350;
58  margin-left: 30px;
59  object-fit: cover;
60}

試したこと

<p>や.letterに対してmarginやpaddingbottomをつけることにより<P>の下に隙間ができるよう試みたのですがダメでした。

dit.

2020/02/14 05:41

CSSだけではなくHTMLも提示してください。

momoka-

2020/02/14 05:48

編集してhtml最初にのせておきました。

行動規範の内容に同意します

回答2件

質問に提示のコードだけでは再現できませんでした。

他のスタイルが影響しているかもしれません。

https://magazine.krowl.jp/4887/
解説もあるようなのでまずはこちらを確認しては。
「高さに固定値を使わない方がいい」とも明記されてますね。

追記
ブラウザのデベロッパーツールなどを使って、余白等がどこで指定されているか確認することをお勧めします。

投稿2020/02/14 06:04

編集2020/02/14 06:06

dit.

総合スコア3235

momoka-

2020/02/14 06:52

解説は確認してます。わざわざ再現しようとしてくれてありがとうございました。わたしも他のスタイルが悪さをしてるような気がするのでデベロッパーツールでちゃんと見てみます。お手数おかけいたしました。

行動規範の内容に同意します

CSS
1
2.picinfo {
3  display: flex;
4  height: 280px;
5
6}
7

で高さを指定しているからです。

おさまる高さにするか、可変の高さにしてください。

投稿2020/02/14 05:15

kyoya0819

総合スコア10429

momoka-

2020/02/14 05:36

回答ありがとうございます。heightの指定をなくすと黄色の箱の中に文章がおさまりましたが、今度は黄色の箱の高さと写真の高さがずれてしまいます。、黄色の箱を左の写真と同じ高さにしたいので文章自体を上にあげたいのですが、文章に対してのmarginが効かない理由がもし分かれば教えていただきたいです。何度もすみません！