PCインストラクターの川上です。
今回は、このような↓ご質問いただきました^^
プログプロフィールの自己紹介欄なのですが、
入力画面できれいに頭揃えして入力したはずなのですが、表示を確認したらガタガタでした。
何度直してもうまく揃わず、仕方なく表示を確認しながら直しました。
なんとか揃いましたが、まだ微妙にずれています。
文章の最後の辺りはどうやっても２ヶ所ほど揃いません。
入力画面では全くそろっていなくて、階段状になっているのに、表示ではそろってみえるのもなぜでしょう？
今回のご質問は、アメブロのプロフィールページ内の「自己紹介欄」でのことですが･･･
頭を揃えるために、文章の先頭でそれぞれスペース（空白）を入力したのだと思います。
プロフィールページでの標準のフォントはMSPゴシックになっていますので、そのスペースが同じ幅にならずにガタガタになってしまったのです。
プロフィールページでなくても、Pのつくフォント（プロポーショナルフォント）だと、自動的に文字幅を調整してくれるので、そのせいで頭がうまく合わなくなったりするのです。
行頭を揃えることを「インデント」と言ったりします。
ブログやプロフィールページでインデントするには、
インデントしたい段落を
<div style="margin-left:12px;"> と </div>
で囲むとよいです。
こちら↓のHTMLコードをコピペしてお使いくださいませ。
<div style="margin-left:12px;">文章</div> なお、数値は自由に変更されるとよいと思いますので！
また･･･
こちらのHTMLコードを使っても同じようにインデントはできます。
<div style="padding-left:12px;"> と </div>
で囲む。
<div style="padding-left:12px;">文章</div> どちらでも同じようにインデントすることができるのですが･･･
下図のように、背景に色をのせたときに、違いがでてきます。
marginの場合は、頭と背景がピッタリ揃いますが、
paddingの場合は、頭の空白部分にも背景色がのります。
さぁ、どちらを使うかは、あなたの使い方次第になります！
以上、パソコンワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大