CSSについての単発質問

Question

この見出しの左棒と文字の間を広く（文字を右に移動）したいです。

どこをどう変えればよいでしょうか？
CSSは以下のようになっています。

.kizi h3{
    margin: 0 0 1.5em;
    padding: 0.3em;
    border-left: 8px solid #FF1A6F;
    font-size: 1.143em;
    font-weight: bold;

Answer 1

chrome等の開発ツールで、styleを触ってみるとイイですよ。リアルタイムに反映されるので、なにが効いているのか分かるようになります。

Comments

[yacht]

返信ありがとうございます。
少しいじってみたのですがわかりませんでした。
よろしければお教え頂けると助かります。

Answer 2

ボーダーラインとその中の要素の感覚はpaddingを指定します。

padding: 0.3em;

この指定の方法だと、上下左右全ての間隔が 0.3em となります。
左側だけ間を大きく取りたい場合は、4つ全て指定するのがいいかと思います。

padding: 0.3em 0.3em 0.3em 1em /* 上側 右側 下側 左側 の順に指定 */

CSS - padding

Comments

[kaputaros]

あ、遅かったっすね^^;

Answer 3

paddingを以下のものに変えると、文字だけ右にズレるようになります。

padding: 0.3em 0.3em 0.3em 0.6em;

0.6em を変えてお好きな余白を空ける事ができますよ。

Answer 4

こんにちは

border-left: 8px solid #FF1A6F;
8pxを希望の幅に変えれば太くなります。

Comments

[yacht]

返信ありがとうございます。
棒は太くなったのですが、棒の太さはそのままに、文字をもう少し右に寄せたいのです。

[kogure]

あ、ごめんなさい。。
太くしたいのかと思てた