CSS

質問

boxのサイズを文字に合わせたいです。

.box1 { /* Box */
padding: 0.5em 1em;
margin: 2em 0;
font-weight: ;
border: solid 1px #fff;
text-align: center;
}
.box1 p {
margin: 0;
padding: 0;
color: white;
}

回答No.1

4017B

とりあえずこんな感じで…

<div class="box1">
<p>あいうえお</p>
<p>あいうえお</p>
</div>

.box1 {
margin: 2em 0;
padding: 0.5em 1em;
border: solid 1px #f00;
text-align: center;
display: table;
}
.box1 p {
margin: 0;
padding: 0;
color: #000;
font-size: 48px;
/*
disp-ay: table-cell;
*/
}

P.S.
通常、<div> の様なブロック要素は "widt:～;" で横幅などを具体的にしていしないと、自動的に横幅一杯に広がりますが。"display:table;" を指定する事でその要素はあたかも <table>～</table> の様な振る舞いになります。<table> の子要素は自動的に縦横のサイズがフレキシブルかつ最小に合わせようとする挙動になるため、擬似的に中のコンテンツの横幅サイズ等に自動的に最適化される事になります。