CSSのタグの改行による隙間を埋めたいです。

画像のように上の段と下の段でそれぞれ異なったフォントを使用しているのですがその際にどうしてもpクラス分？隙間が空いてしまいます。

これをcssなどを使って簡単に埋められないのでしょうか。
margin-bottom:0;だとダメだったのですが原因は他ということでしょうか。

よろしくお願いします。

【html】
<p class="aaaaaa">aaaaaa</p>
<p class="bbbbbbb">テキスト</p>

.aaaaaa{
font-family:arial;
font-size:20px;
}

.bbbbbbb{
font-family:arial black;
font-size:60px;
}

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

回答5件

ベストアンサー

手元の環境では期待通りに動作するので、指定されたスタイルより詳細度の高いスタイルが別で指定されている気がします。
その場合、対処療法的には !important を付与する手もありますが、詳細度の高いスタイルを書き換えるか、もっと詳細度の高いスタイルを定義する方が正攻法だと思います。

要素間のマージンを0にする - JSFiddle

開発者ツールで該当要素に適用されているスタイルを確認してみてください。

Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider

HTML
1<style>
2.aaaaaa {
3  font-family: arial;
4  font-size: 20px;
5}
6
7.bbbbbbb {
8  font-family: arial;
9  font-size: 60px;
10}
11
12.aaaaaa, .bbbbbbb {
13  margin: 0;
14  padding: 0;
15  line-height: 1em;
16  border: solid 1px black;
17}
18</style>
19</head>
20<body>
21<p class="aaaaaa">aaaaaa</p>
22<p class="bbbbbbb">テキスト</p>

Re: tanukiodori さん

投稿2016/10/11 07:21

編集2016/10/11 07:24

think49

総合スコア18194

退会済みユーザー

2016/10/11 08:12

コメントありがとうございます。まずborderで確かめた結果画像を載せました。（右端が切れているのは気にしないでください。画像制作で見落としただけになります。）なぜか下の上部だけスペースが大きいです。実際には数字を入れているのですがそれが原因でしょうか。他のやり方も試してみます。

退会済みユーザー

2016/10/11 08:13

実際の下部に入るのはテキスト→１になります。

think49

2016/10/11 09:16

画像を見せられてもtanukiodoriさんが出された情報から私が「再現できない」ので意味がないと思います。今まで出た情報から https://jsfiddle.net/s6Lcus8o/1/ で隙間がなくなる事を証明したつもりですが、tanukiodori さんの環境で https://jsfiddle.net/s6Lcus8o/1/ で隙間が出ているでしょうか。隙間がないのなら今までに出ていない情報に隙間ができる原因があるという事になります。それを特定して質問本文に追記いただければ、より具体的なアドバイスが可能だと思います。特定の一助として「開発者ツール」の使い方の参考URLを載せていますので参考にしてみて頂ければ。

退会済みユーザー

2016/10/11 17:18

コメントありがとうございます。現在https://jsfiddle.net/s6Lcus8o/1/を使用して確認中になります。情報不足の件申し訳ありません。また開発者ツールを教えていただいてありがとうございます。原因が解明できましたらこちらの方に回答含め載せようと思います。

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

ドットとclass名の間に半角スペースが入っていますが、本当に効いていますか？
とりあえずこれをまるっとコピーして指定してみてください。

css
1.aaaaaa {
2	margin: 0;
3	padding: 0;
4	font-family: arial;
5	font-size: 20px;
6}
7.bbbbbbb {
8	margin: 0;
9	padding: 0;
10	font-family:arial black;
11	font-size:60px;
12}

投稿2016/10/10 11:46

gin

総合スコア2722

退会済みユーザー

2016/10/11 05:31

コメントありがとうございます。クラス名の半角スペースはこちらのミスです。実際は半角スペースなしになります。一応font-familyやfantasizeは効いています。後ほど質問の該当部分を訂正しておきます。

gin

2016/10/11 05:38

それでmargin:0;などにしてもダメですか～ yamato_hikawaさんの言われるようにline-heightですかね～それでもダメな場合は、上位でp要素が固められてると思います。例えば、 ------- #main p { margin-bottom: 10px; } ------- というようなid指定など。

退会済みユーザー

2016/10/11 06:57

コメントありがとうございます。【line-height:1;】を指定したら行間自体は詰まりましたがまだまだ希望には遠かったです。そこでお聞きしたのですがを使って同じフォントで違うサイズをそれぞれ指定することは出来るのでしょうか。よろしくお願いします。

gin

2016/10/11 07:00

可能です。 p要素そのものでやることはおすすめしません。 p要素にclassを振ってそこで指定してください。というかこれは今普通に↑で書いているやつですね。

gin

2016/10/11 07:03

あと間が詰まらないのは他からのcssが継承されて効いているので、検証ツールでじっくりmarginかpaddingが生きていないか見てみてください。

退会済みユーザー

2016/10/11 07:40

コメントありがとうございます。説明不足でした。今それぞれクラスで分けているから隙間が出ているのでいっそ同じクラスでフォントサイズだけ１行目と２行目で20pxと60pxみたいな感じで分けれないかと思いましたがちょっと強引な考えでした。