HTMLで書いた文章の右側の余白を消したいです。

実現したいこと

・文章の右横にある余白を消したいです。（margin, pagginは0の状態）イメージ説明

前提

文章と画像があり、flexして横並びにし、row-reverseで左右を入れ替えた後に検証ツールで余白を確認したところ、<div class="block-text">にある文章の右側に謎の余白が出来てます。
marginとpaddingは0です。

例えば、レスポンシブで横幅600pxを見た時、block要素は600pxになるのですが、block-textの右側に何かあるようで、画面幅いっぱいにならないです。
改行しないのと、文字サイズ8pxのまま出来るやり方を探しています。

初歩的なところかもしれませんが直し方を探しています。

該当のソースコード

HTML
1  <div class="block">
2    <div class="block-text">
3      <h3>
4        <span class="num">11</span><br>
5        <span class="title">緑黄色野菜</span>
6      </h3>
7      <p>アスパラガス、かぼちゃ、さやえんどう、オクラ、ケール、小松菜、しそ、春菊、高菜、<br>チンゲンサイ、トマト、にら、にんじん、バジル、パセリ、ピーマン<br>アスパラガス、かぼちゃ、さやえんどう、オクラ、ケール、小松菜、しそ、春菊、高菜<br>チンゲンサイ、トマト、にら、にんじん、バジル、パセリ、ピーマン
8      </p>
9    </div>
10    <div class="partner-img"><img src="img/vegetable.png" alt=""></div>
11  </div>

css
1@charset "utf-8";
2
3* {
4  box-sizing: border-box;
5  margin: 0;
6  padding: 0;
7}
8
9.block {
10  display: flex;
11  flex-direction: row-reverse;
12  justify-content: flex-end;
13  align-items: center;
14  .block-text {
15    position: relative;
16    left: 14vw;
17    h3 {
18      .num {
19        font-size: 3.8vw;
20      }
21      .title {
22        font-size: 4vw;
23      }
24    }
25    p {
26      line-height: 2.2;
27      white-space: nowrap;
28      font-size: 10px;
29      transform: translateX(-9.9%) scale(0.8);
30    }
31  }
32  .partner-img {
33    position: relative;
34    left: 10.66vw;
35    img {
36      width: 32.32vw;
37      height: auto;
38    }
39  }
40}

試したこと

displayプロパティが原因かなと色々変えたのですが、変わりませんでした。
検索してもこれといったものが出てこず困っています。

reimei

2023/05/17 06:20

<br>を消してもダメでしょうか？

int32_t

2023/05/17 06:25

> transform: translateX(-9.9%) scale(0.8); これで <p> を左にずらしているのでは。

wafflar

2023/05/17 06:38

<br>を消しても右側の空白は無くならなかったです。

wafflar

2023/05/17 06:39

tranlateXを消してscale(0.8)だけしても右側に空白が出来てしまいます...

int32_t

2023/05/17 07:50

<br> も translateX() も scale() も消しましょう。

wafflar

2023/05/17 08:28

説明下手ですみません！空白は消したいのですけど、 brの所は改行したく、それ以外の所は改行しないようにして、文字サイズは8pxでやりたいのですが、このやり方だと文章右に出来た空白を消すことは無理なのでしょうか？

int32_t

2023/05/17 23:41

文章の横幅を変えたくないなら、文章全体を右に動かすしかないですよね。そうすると左に余白ができますが、それでいいんでしょうか?

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

回答1件

ベストアンサー

transform: scale(0.8);は周りのレイアウトに影響を与えずに、指定した要素のみ縮小します。
親要素は縮小しないので、指定した要素が縮小した分余白になります。

p要素のscale(0.8)は削除して、親要素.block-textにscale(0.8)を設定すればいいでしょう。
ただし、h3要素も縮小されてしまうので、フォントサイズを大きくするか、scale(1.25)で拡大すればいいでしょう。

css
1  .block-text {
2    position: relative;
3    left: 14vw;
4    transform: scale(0.8);
5    h3 {
6      transform: scale(1.25);
7      .num {
8        font-size: 3.8vw;
9      }
10      .title {
11        font-size: 4vw;
12      }
13    }
14    p {
15      line-height: 2.2;
16      white-space: nowrap;
17      font-size: 10px;
18      transform: translateX(-9.9%);
19    }