ryu0130さん

残念ながら、画像だけを見てわかる事案には思いません。

フォーラム上部にあるように、環境情報のご提示がないと、難しい気はします。

書き込みの前に以下の3点をご確認ください。

1. 1つのトピックにつき1つの質問を書き込んでください
2. 不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください
3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

例えば…。

投稿者:: @ryu0130

改行がないのにブロックの部分が改行になるところです。

これをどうやってこちら側で確認すれば良いのでしょうか。
画像を拝見しても、私には分からないです。

改行と言っても、いろいろある気はしますし…。
（ブロック要素であれば・・・。）

基本的には、実際のサイトを拝見しないと…という気します。

エディタは何をご利用で、エディタ上ではどういう表示で、実際のページはどうなっている。
どんなブロック等を使っている。

そういう情報もありませんので、ちょっと難しい印象です。

もしかすると、お詳しい方ならお分かりになる・・・かもしれませんが・・・。

この投稿みたいですね。

https://fxtrader-ryu.com/self-management/gap-time_study/

<p style="background: #ffffff; padding: 10px; border: 2px solid #3399ff;">
    <span style="font-size: 22px; color: #3399ff;"><strong>☑︎</strong></span>通勤時間中<span style="font-size: 22px; color: #3399ff;"><strong>
    <br />
    ☑︎</strong></span>仕事の休憩中<span class="bold blue">
    <br />
    </span><span style="font-size: 22px; color: #3399ff;"><strong>☑︎</strong></span>家事中（洗い物・洗濯・料理・買い物）など
    <br />
    <span style="font-size: 22px; color: #3399ff;"><strong>☑︎</strong></span>歯磨き中
    <br />
    <span style="font-size: 22px; color: #3399ff;"><strong>☑︎</strong></span>入浴中
    <br />
    <span style="font-size: 22px; color: #3399ff;"><strong>☑︎</strong></span>子供の就寝のタイミング
</p>

「ブロックの部分」とはどこだろうと思っていましたが、どうも私が書いたところではないようです。

「（例）隙間時間」の部分が、タブなんですね。

改行というより、タブとボックスの間に隙間ができるということみたいですね。

今スマホしかないもので、後程確認します。

目次上のものは、いかのような状態。

.entry-content>* {
    margin-bottom: 1.4em;
}

<div class="entry-content cf" itemprop="mainEntityOfPage">
    <div>
        <div>

<div class="entry-content cf" itemprop="mainEntityOfPage">
    <div>

<div style="display: inline-block; background: #3399ff; padding: 5px 10px; color: #ffffff;">

@mk2_mk2 さん

返信ありがとうございます。

上記認識で問題ありません。

確認の上、3点質問させてください。

①margin-bottom: 0;は、どこにいれるのでしょうか？

②class指定の場合、どのようなcssにすれば宜しいでしょうか？

③margin-bottom: 0;がなくても隙間がないブロックもありますが、原因がわかりそうですか？

ryu0130さん

投稿者:: @ryu0130

①margin-bottom: 0;は、どこにいれるのでしょうか？

以下のインラインで指定されているstyleの中に入れます。

投稿者:: @mk2_mk2

<div style="display: inline-block; background: #3399ff; padding: 5px 10px; color: #ffffff;">

 

ここに、「margin-bottom: 0;」を追加すると良いと思います。

.tab {
    display: inline-block;
    background: #3399ff;
    padding: 5px 10px;
    color: #ffffff;
    margin-bottom: 0;
}

@mk2_mk2 さん

返信ありがとうございます。

再度、申し訳ありませんが

確認の上、２点質問させてください。

①margin-bottom: 0;は、どことどこの間に入れるのが良いでしょうか？ 詳しく教えていただけますと幸いです。

②下記は、どう言う意味でしょうか？

数字を1.4←0にするとどう言う支障が出ますか？

.entry-content>* {
    margin-bottom: 1.4em;
}

ryu0130さな

すみません、ちょっと難しい気がします。

投稿者:: @ryu0130

①margin-bottom: 0;は、どことどこの間に入れるのが良いでしょうか？ 詳しく教えていただけますと幸いです。

提示した、divタグのstyle属性の中であれば、どこに入れても問題ありません。

面倒でしたら、1番最後に入れれば良いです。

投稿者:: @ryu0130

数字を1.4←0にするとどう言う支障が出ますか？

.entry-content直下の全ての要素の、下のmarginがなくなってしまいます。
（つまりくっつく。）

例えば、現状は以下。

例えば、以下の2つを比較すれば分かります。

投稿者:: @mk2_mk2

以下のインラインで指定されているstyleの中に入れます。

投稿者:: @mk2_mk2

<div style="display: inline-block; background: #3399ff; padding: 5px 10px; color: #ffffff;">

 

ここに、「margin-bottom: 0;」を追加すると良いと思います。

上記は「（例）隙間時間」のタブに当たる部分のdivタグに書かれているものです。

 

投稿者:: @mk2_mk2

.tab {
    display: inline-block;
    background: #3399ff;
    padding: 5px 10px;
    color: #ffffff;
    margin-bottom: 0;
}

 

既にインラインで指定しているものをただ書くだけです。
（今回、margin-bottomは追加しますが。）

下のCSSはmargin指定を追加しましたが。

最初のdivタグのstyle属性の中身と同じです。

改行が入って見えるか、一行に書いているように見えるか、それだけしか違いはありません。

下のcssを、一行にstyle属性に書けば良いだけです。
（最後にmargin指定を追加している。）

ryu0130さん

環境情報のご提示がないため、エディタは何をご利用なのかは分かりません。

そして、当該部分はCocoonの機能ではないかと思います。
そのため、、自作なのか、何かの機能なのかも分かりません。
（ここは、環境情報のご提示があっても分からない可能性が高いです。）

ですので、問題を解決するために言えるとすれば…。

①まずはエディタをコードエディタ表示にします。

②そして、以下の部分を検索して探します。

<div style="display: inline-block; background: #3399ff; padding: 5px 10px; color: #ffffff;">

例えば、今回対象となった「（例）隙間時間」の直前の部分にあるはずです。

③上記②の部分に「margin-bottom: 0;」を追加した以下に変更します。

<div style="display: inline-block; background: #3399ff; padding: 5px 10px; color: #ffffff; margin-bottom: 0;">

ここまでしか言えない気がします。

本件、サイトを拝見したところ解決していました。
（インラインでmargin-bottomが入っています。）

解決済・クローズで良さそうです。

更新時間からもしばらく時間が経っていますし。