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

0 コメント