widthの値別のレンダリング

 
ビジュアル詳細
ホーム > CSS2 Note > width > widthの値別のレンダリング

長さ

互換モード
<style type="text/css"><!--
.eg1 {width:300px; border:8px solid #9cf; background:#eee; padding:7px;}
--></style>

<div class="eg1">.eg1</div>
標準モード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<style type="text/css"><!--
.eg1 {width:300px; border:8px solid #9cf; background:#eee; padding:7px;}
--></style>

<div class="eg1">.eg1</div>
 

%値

互換モード
<style type="text/css"><!--
.eg1 {width:33%; border:8px solid #9cf; background:#eee; padding:7px;}
--></style>

<div class="eg1">.eg1</div>
標準モード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<style type="text/css"><!--
.eg1 {width:33%; border:8px solid #9cf; background:#eee; padding:7px;}
--></style>

<div class="eg1">.eg1</div>
 

auto

互換モード
<style type="text/css"><!--
.eg1 {width:auto; border:8px solid #9cf; background:#eee; padding:7px;}
--></style>

<div class="eg1">.eg1</div>
標準モード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<style type="text/css"><!--
.eg1 {width:auto; border:8px solid #9cf; background:#eee; padding:7px;}
--></style>

<div class="eg1">.eg1</div>
 
関連項目: width
トップページ CSS2 Note ページトップ
 2009/09/01発行 2009/09/01更新