1

私はこのような奇妙な問題を解決するために一生懸命研究し、取り組んできました。テキストを保持することになっている div があります。この div はそのテキストでサイズ変更できる必要があるため、2 行のテキストがある場合は div の高さが高くなるなどです。すべて正常に動作しているように見えますが、何らかの理由でテキストの上部に何らかのパディングが追加されています。そして文末へ。そのパディングの原因がわかりません。実際には、div をテキストによりコンパクトに収めたいと考えています。これが私が話していることのイメージです：

http://i.imgur.com/ZblaLJX.png

水色のボックスの高さを短くして、テキストにぴったりと合わせるようにします。このdivのCSSコードは次のとおりです。

.captionCSS {
    max-width:70%;
    margin-top:10px; 
    margin-bottom:20px; 
    padding-left:5px; 
    padding-right:5px;
    padding-top:0px; 
    padding-bottom:0; 
    background-color:#aef7f8; 
    overflow:hidden; 
    color:black; 
}

すべてのマージンとパディングをいじり、それらをゼロに設定してから再度設定しましたが、何も機能していないようです。行の高さは別の div から継承され、18px ですが、フォント サイズは 12px です。行の高さを下げてみましたが、上下のパディング/ギャップには影響しませんでした。

また、テキストが 2 行を占める場合、横に余分なパディングがあるという点で少し悪化します。これを取り除きたいのです。

http://i.imgur.com/Ecdxdtq.png

ええ、それは私の問題です。理想的には、div の端からテキストの上部まで 5 ピクセルのギャップが欲しいので、とにかくそれを行う必要がある場合はお知らせください! 助けてくれてどうもありがとう！

4

2 に答える 2

1

以下を試してみてください。

コードが次のようになっている場合:

<p>Some text with <span class="captionCSS">highlighted text</span>.</p>

次の CSS ルールを適用します。

p {
    background-color: gray;
    padding: 5px;
}
.captionCSS {
    max-width:70%;
    padding: 0 5px;
    background-color:#aef7f8; 
    display: inline-block;
    line-height: 1.00;
}

display: inline-blockキャプション ラッパーに設定すると、行の高さの値が影響します。

line-height: 1.00行の高さを要素の font-size と同じサイズに強制します。値を 1 未満に設定すると、ぴったりはまりますが、フォントによっては特定の文字のアセンダーとディセンダーがクリップされる場合もあります。

デモを参照してください: http://jsfiddle.net/audetwebdesign/2cyaF/

于 2013-09-19T22:21:23.040 に答える
0

HTML がないと確信が持てませんが、最初の推測では、テキストには既にスタイリング ルールを持つ親ブロック レベルの要素があると思います。(例:<hX>または<p>)

次のようにして、css を介してこれらのスタイルをクリアできます。

h1,h2,h3,p{
    padding:0;
    margin:0;
}

あなたのスタイルを使用したいくつかの例を次に示します: http://jsfiddle.net/JTrWL/

于 2013-09-19T22:12:32.267 に答える