ロゴと吹き出しの間に隙間を空けたい

吹き出しを作成しましたが、ロゴと吹き出しの間が詰まりすぎてしまってます。
パソコン、スマホ共に吹き出しを少し右に寄せたいのですが、行き詰っております。
下記、画像の上がPC、下がスマホになります。

ご教授のほど宜しくお願い致します。

<div class="balloon_Lc">
<div class="icon" align="center"><img src="/review_good.png" width="60px" /></div>
<div class="text" style="font-size:16px">あああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div></div>

.balloon_Lc{
  display : inline-block;
  position: relative;
  padding: 10px;
  border-radius: 10px;
  margin: 0px 0px 0px 50px;
  background: -moz-linear-gradient(top, #FFFFFF, #FBF9D3);
  background: -webkit-linear-gradient(top, #FFFFFF, #FBF9D3);
  background: linear-gradient(to bottom, #FFFFFF, #FBF9D3);
  border: 2px solid #F4EE6D;    /* 線 */
}
.balloon_Lc .icon{
  position: absolute;
  left: -60px;
  top: 0px;
  font-size: 11px;
}
.balloon_Lc .text{
  font-size: 13px;
  line-height: 140%;
}

kyoya0819

2019/09/15 04:10

HTMLをご提示ください

study3595

2019/09/15 04:13

ありがとうございます。 HTMLを追加いたしました。宜しくお願い致します。

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

回答1件

ベストアンサー

CSS
1.balloon_Lc{
2  display : inline-block;
3  position: relative;
4  padding: 10px;
5  border-radius: 10px;
6  margin: 0px 0px 0px 70px; //ここと
7  background: -moz-linear-gradient(top, #FFFFFF, #FBF9D3);
8  background: -webkit-linear-gradient(top, #FFFFFF, #FBF9D3);
9  background: linear-gradient(to bottom, #FFFFFF, #FBF9D3);
10  border: 2px solid #F4EE6D;    /* 線 */
11}
12.balloon_Lc .icon{
13  position: absolute;
14  left: -70px; //ここの絶対値を大きくする
15  top: 0px;
16  font-size: 11px;
17}
18.balloon_Lc .text{
19  font-size: 13px;
20  line-height: 140%;
21}