top > useful > imgtest01

imgに、font-sizeの影響が出る？

更新日：

このページには専用のCSSだけを使用している。

cssの一番上に、

【CSS】
body,p,img {
  padding: 0;
  margin: 0;
  border: none;
}

を入れている。

bodyには"line-height"も、"font-size"も指定していない。


このテストのために作った画像は50px＊50pxサイズ。

下では8枚並べてある。


HTML内では見やすいようにimgリンクを改行している。

しかしこれは普通のことで、本来影響が出るはずがない。


なにもなし

なにもなし

画像は50px＊50pxサイズ

darkpinkのwidthは、250px

【CSS】
.darkbox {
  background: #ddd;
  padding: 18px;
  width: 270px;
  border: 1px solid #aaa;
  border-radius: 10px/10px;
}
.box250px { width: 250px;}
.darkpink { background: darkpink;}

【HTML】
<div class="box250px darkpink">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
</div>

HTML内で改行無し

HTML内で改行無し

画像は50px＊50pxサイズ

darkpinkのwidthは、250px

【CSS】
.darkbox {
  background: #ddd;
  padding: 18px;
  width: 270px;
  border: 1px solid #aaa;
  border-radius: 10px/10px;
}
.box250px { width: 250px;}
.darkpink { background: darkpink;}

【HTML】
<div class="box250px darkpink">
  <img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif">
</div>

line-height: 0;

line-height: 0;

画像は50px＊50pxサイズ

darkpinkのwidthは、250px

【CSS】
.darkbox {
  background: #ddd;
  padding: 18px;
  width: 270px;
  border: 1px solid #aaa;
  border-radius: 10px/10px;
}
.box250px { width: 250px;}
.darkpink { background: darkpink;}
.lineheight0 { line-height: 0;}

【HTML】
<div class="box250px darkpink lineheight0">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
</div>

font-size: 0;

font-size: 0;

画像は50px＊50pxサイズ

darkpinkのwidthは、250px

【CSS】
.darkbox {
  background: #ddd;
  padding: 18px;
  width: 270px;
  border: 1px solid #aaa;
  border-radius: 10px/10px;
}
.box250px { width: 250px;}
.darkpink { background: darkpink;}
.fontsize0 { font-size: 0;}

【HTML】
<div class="box250px darkpink fontsize0">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
</div>

vertical-align: bottom;

vertical-align: bottom;

画像は50px＊50pxサイズ

darkpinkのwidthは、250px

【CSS】
.darkbox {
  background: #ddd;
  padding: 18px;
  width: 270px;
  border: 1px solid #aaa;
  border-radius: 10px/10px;
}
.box250px { width: 250px;}
.darkpink { background: darkpink;}
.vabottom img { vertical-align: bottom;}

【HTML】
<div class="box250px darkpink vabottom">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
</div>

vertical-align: bottom; + HTML内で改行無し

vertical-align: bottom;

画像は50px＊50pxサイズ

darkpinkのwidthは、250px

【CSS】
.darkbox {
  background: #ddd;
  padding: 18px;
  width: 270px;
  border: 1px solid #aaa;
  border-radius: 10px/10px;
}
.box250px { width: 250px;}
.darkpink { background: darkpink;}
.vabottom img { vertical-align: bottom;}

【HTML】
<div class="box250px darkpink vabottom">
  <img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif">
</div>

line-height: 0; + HTML内で改行無し

line-height: 0;

画像は50px＊50pxサイズ

darkpinkのwidthは、250px

【CSS】
.darkbox {
  background: #ddd;
  padding: 18px;
  width: 270px;
  border: 1px solid #aaa;
  border-radius: 10px/10px;
}
.box250px { width: 250px;}
.darkpink { background: darkpink;}
.lineheight0 { line-height: 0;}

【HTML】
<div class="box250px darkpink lineheight0">
  <img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif"><img src="img/testimg50px02.gif">
</div>

letter-spacing: -6px;

letter-spacing: -6px;

画像は50px＊50pxサイズ

darkpinkのwidthは、250px

【CSS】
.darkbox {
  background: #ddd;
  padding: 18px;
  width: 270px;
  border: 1px solid #aaa;
  border-radius: 10px/10px;
}
.box250px { width: 250px;}
.darkpink { background: darkpink;}
.letterspacing-6px { letter-spacing: -6px;}

【HTML】
<div class="box250px darkpink letterspacing-6px">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
</div>

word-spacing: -5.5px;

word-spacing: -5.5px;

画像は50px＊50pxサイズ

darkpinkのwidthは、250px

【CSS】
.darkbox {
  background: #ddd;
  padding: 18px;
  width: 270px;
  border: 1px solid #aaa;
  border-radius: 10px/10px;
}
.box250px { width: 250px;}
.darkpink { background: darkpink;}
.wordspacing-55px { word-spacing: -5.5px;}

【HTML】
<div class="box250px darkpink">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
  <img src="img/testimg50px02.gif">
</div>



2014 © Denkikaiden