(はてなブログ)htmlのflexbox画像が(flex_test_item内で横に空白付けないでほしい）

はてなブログ内でウェブサイトを作成してます。
flexboxを適用したのですが、画像の表示がおかしいです。
PC版サイトだと
画像がflex_test_item内に下の画像のように横に空白を作ってしまいます。
(赤い矢印)
空白を作らず、画像の横幅を拡大させたいです。
スマフォ版のサイトだと下のようにならないのです。

回答お願いします。
下がソースコードです。
※なぜか、styleタグをコメントアウトされていてもはてなブログでは適用されてしまいます。

<div class="flex_test-box">
<div class="flex_test-item">
<figure><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/poyone/20190208/20190208113450.jpg" alt="えええ写真" width="191" />
<figcaption></figcaption>
<figcaption>aaaaaaaa</figcaption>
<figcaption></figcaption>
</figure>
</div>
<div class="flex_test-item">
<figure><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/poyone/20190208/20190208113450.jpg" alt="えええ写真" />
<figcaption></figcaption>
<figcaption>aaaaaaaaaaaaaaaaa</figcaption>
<figcaption>ffffffffffff</figcaption>
</figure>
</div>
<div class="flex_test-item">
<figure><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/poyone/20190208/20190208113450.jpg" alt="写真" />
<figcaption></figcaption>
<figcaption>aaaaaaaaaaaaaaaaaa</figcaption>
<figcaption>dfafadsffffffff</figcaption>
</figure>
</div>
<div class="flex_test-item">
<figure><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/poyone/20190208/20190208113450.jpg" alt="えええ写真" />
<figcaption></figcaption>
<figcaption>ｆだふぁｆだｆ</figcaption>
<figcaption></figcaption>
</figure>
</div>
</div>
<style><!--
.flex_test-box {
    background-color: #eee;     /* 背景色指定 */
    padding:  1px;             /* 余白指定 */
    display: flex;
    
    
}
figcaption {
    font-size: 0.8em;        /* 文字サイズを90%に */
    /* text-align: center;      */
}
 
.flex_test-item {
    padding: 1px;
    color:  #fff;               /* 文字色 */
    margin:  1px;              /* 外側の余白 */
    border-radius:  1px;        /* 角丸指定 */
    width:50%;
}
 
.flex_test-item:nth-child(1) {
    background-color:  #2196F3; /* 背景色指定 */
}
 
.flex_test-item:nth-child(2) {
    background-color:  #2196F3; /* 背景色指定 */
}
 
.flex_test-item:nth-child(3) {
    background-color: #3F51B5; /* 背景色指定 */
}
 
.flex_test-item:nth-child(4) {
    background-color:  #00BCD4; /* 背景色指定 */

}
--></style>

#追記1一端スタイルシートをリセット
reset.cssのコードを追加しました。

退会済みユーザー

2019/02/10 08:34

？スタイルタグ内の  はその昔 CSSが使えなかったブラウザがHTMLのテキストとして解釈しないためのであってCSSをコメントにする意味ではないです。コメント化したいなら /* ～ */ で囲ってください。（論点はそこじゃない）

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

回答1件

ベストアンサー

デフォルトのスタイルシートでfigureにmarginがかかっているからかと。
この質問が出るということは前の質問は解決済みになるはずでは。自己解決にでもして置いてください。

投稿2019/02/10 07:39

kei344

総合スコア69625

退会済みユーザー

2019/02/10 08:43

未解決が１７件と解決するきがないようにもみえるしね

mercurian-teto

2019/02/10 09:36 編集

<デフォルトのスタイルシートでfigureにmarginがかかっているからかと。デフォルトのスタイルシートとは別に読み込まれているcssファイルでしょうか。はてなブログで確認したところ、 ``` /* <system section="theme" selected="life"> */ @import "/css/theme/life/life.css"; /* </system> */ /* <system section="background" selected="default"> */ /* default */ /* </system> */ /* Responsive: yes */ p aa{color:red;} figure.gazo-box { float: left; padding-right: 0.1px; } body{background:#9e9e9e;} #title a { visibility: hidden; } #blog-description { visibility: hidden; } #blog-title { background-image: url("https://www.pakutaso.com/shared/img/thumb/171203IMGL0144_TP_V.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; margin:0px; padding: 80px 0px 80px 0px;/* -- 左から順に「上、右、下、左」-- */ ｝ .entry-content p { margin:0} ``` となっていました。