【HTML】リストの左の余白を消して、要素を縦並びに表示する

HTML

HTMLで要素を縦並びに表示する方法です。今回はリストを使った方法をご紹介します。

ここで使うHTMLのソースコードはこちらです。

CSSは以下の通りです。 わかりやすいように、リスト全体をピンクで塗りつぶし、要素を赤で塗りつぶしています。

これを表示させると以下のようになります。

左端に点があり、スペースが設けられていることが分かります。

左端の点を非表示にするためには、list-styleをnoneにします。

点は消えましたが、左端に余白が残っています。

paddingを0にすることで、余白を消すことができます。

余白を消して、要素を縦並びに表示することができました。

タイトルとURLをコピーしました