質問編集履歴

2 修正

退会済みユーザー

退会済みユーザー

2017/01/11 18:55  投稿

line-heightを指定すると前の要素の画像が動いてしまう
要素にline-heightを指定し、
文字を中央に揃えようすると、
前の要素の画像も一緒に動いてしまいました。
原因が全くわからず、どのようにすれば画像は動かないようにできるのでしょうか??
*動いた画像に`margin-top:-15px;`とすると、中央に戻ります。
共通で指定されているline-height:1.5が原因なのでしょうか?
よろしくお願いいたします。
```.html
<ul class="category-list">
   <li class="category">
       <a class="category__link" href="#">
         <div class="category__div">
           <img class="category__img" src="hoge">  // 動かしたくない画像
           <label class="category__name">カテゴリー</label>  // line-heightを指定して中央に揃える
         </div>
       </a>
   </li>
</ul>
```
```.css
// 共通で line-height: 1.5; が記述されている状態
.main__category-list {
.category-list {
   width: 1200px;
   margin: 0 auto;
   padding: 0;
   font-size: 0;
   margin-bottom: 100px;
}
.category {
   width: 380px;
   height: 140px;
   display: inline-block;
   margin-right: 30px;
   padding-top: 20px;
   padding-bottom: 20px;
}
.category__inner {
   position: relative;
}
.category__img {
   width: 100px;
   height: auto;
}
.category__name {
   display: inline-block;
   width: auto;
   font-size: 16px;
   line-height: 6.25;
   margin-left: 15px;
}
```
  • HTML

    15827 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    10742 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CSS3

    3570 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • HTML5

    6911 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1 tag追加

退会済みユーザー

退会済みユーザー

2017/01/11 18:55  投稿

line-heightを指定すると前の要素の画像が動いてしまう
要素にline-heightを指定し、
文字を中央に揃えようすると、
前の要素の画像も一緒に動いてしまいました。
原因が全くわからず、どのようにすれば画像は動かないようにできるのでしょうか??
*動いた画像に`margin-top:-15px;`とすると、中央に戻ります。
共通で指定されているline-height:1.5が原因なのでしょうか?
よろしくお願いいたします。
```.html
<ul class="category-list">
<li class="category">
<a class="category__link" href="#">
<div class="category__div">
<img class="category__img" src="hoge"> // 動かしたくない画像
<label class="category__name">カテゴリー</label> // line-heightを指定して中央に揃える
</div>
</a>
</li>
</ul>
```
```.css
// 共通で line-height: 1.5; が記述されている状態
.main__category-list {
width: 1200px;
margin: 0 auto;
padding: 0;
font-size: 0;
margin-bottom: 100px;
}
.category {
width: 380px;
height: 140px;
display: inline-block;
margin-right: 30px;
padding-top: 20px;
padding-bottom: 20px;
}
.category__inner {
position: relative;
}
.category__img {
width: 100px;
height: auto;
}
.category__name {
display: inline-block;
width: auto;
font-size: 16px;
line-height: 6.25;
margin-left: 15px;
}
```
  • HTML

    15827 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    10742 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CSS3

    3570 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • HTML5

    6911 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る