実現したいこと
・文章の右横にある余白を消したいです。(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プロパティが原因かなと色々変えたのですが、変わりませんでした。
検索してもこれといったものが出てこず困っています。

回答1件
あなたの回答
tips
プレビュー