web-dev-qa-db-ja.com

Divi行間の余白と余白を削除するにはどうすればいいですか？

2行のdivi行があり、各行には3列が含まれ、各列には Blurbモジュール項目が含まれています。

2行分の余白と上下の余白を削除したいのですが、余白と余白の0pxが欲しいのですが、どうすればよいですか。私はデザインからそれを設定します、あなたは間隔セクションでそれをすることができました、しかしまだ空のスペースがあります。

enter image description here 

編集

私はすべてのeSparkBizチームを行ったので、ほとんどすべてにマージンとパディングが0pxであることがわかります。それでも私は見つけることができない2つのセクションの間に何かがあります。 CHECK OUT OUR LATEST PROJECTSまで下にスクロールして、それぞれ3列×2行あり、その間のスペースを削除しようとしています。

enter image description here 

解決しました、私の答えを以下に投稿しました

customizationcss
1
Lynob

デモを見てみると、paddingとmarginをゼロにしているのがわかります。それは素晴らしいことです。スペースを見ているのは、白い色のコンテンツがあり、それをスペース（パディングまたはマージン）として混同しているからです。

enter image description here 

1
bravokeyl

ステップ1： 設定オプションをクリック

enter image description here 

ステップ2： あなたの列の間隔を0に設定します。パディングとマージンが不要な場合は、カスタム排水幅オプションが有効になっていることを確認してください。

enter image description here 

間隔を削除するための代替ソリューション

下のスクリーンショットのマークに従って、間隔オプションを使用してカスタム余白を設定することもできます。

enter image description here 

この提案があなたに役立つことを願っています。

1
eSparkBiz Team

マージンとパディングが行と列の間で矛盾しているとき、我々は一般的にこれを見ます。この問題を解決するための代替方法は、マイナスのマージンを作成することです。マイナスの余白を使用することを選択した場合は、Diviが画像を右から左にオーバーラップさせ、正しいコンテンツを選択するようにします。

さらに、デスクトップ、タブレット、およびモバイルを個別にカスタマイズしていること、および横型タブレットのブレークポイントがデスクトップの余白および余白のパラメータに該当することを確認してください。モバイルまたはタブレットのビューとしてビジュアルビルダーに表示されるものは必ずしも正確ではないため、私はiPadをモバイル用のiPhoneなどと共にブレークポイントの競合をチェックするために私の隣に置いています。

お役に立てれば。 2pxのホワイトスペースを画像の間に消すことができなかったので、私達は私達のホームページで、中央に向かってマイナスの余白を使用しました。 GingerHippo で自分用に見てください

enter image description here enter image description here 

1
GingerHippo

私は.projects-galleryと呼ばれるメインのblurb要素の上にクラスを作りました、そして私はこのCSSを追加しました

 .projects-gallery .et_pb_blurb_container { 
     display: none; 
}
 .projects-gallery:hover .et_pb_blurb_container { 
     display: block; 
}

その理由は、.et_pb_blurb_containerがスペースを取っているために隠すことができないためです。その場合、プロジェクトのタイトルは表示されません。上記のコードを使用して、誰かが特定のプロジェクトにカーソルを置いたときに、それを非表示にしてから表示します。カスタムクラスが必要なので、ページの残りの部分をめちゃくちゃにしないでください。

私のように別々の行にそれらを持っていて、行の間のマージンを削除したい場合、diviはそれを削除するためにline-height:1をbodyに適用します。

.projects-gallery{
    line-height:0;
}

結果

enter image description here 

画像の上にマウスを置いたときにアニメーションを維持する

.projects-gallery:hover{
    line-height:1;
}
1
Lynob