一度設定されたmargin:0,padding:0を部分的に無効にしたい

#背景

こんな感じの表示を作りたいです。
このサイトのHTMLを参照したところ、HTML標準のul,liタグを使用してインデントを作っていたので自分も同じ作りにしようと思いました。

一通り作ってみましたが、buefyを使っているせいか、margin: 0,padding: 0が効いています。

chromeのディベロッパーツールでpadding: 0を無効にすると期待通りインデントされます。

[参考]

buefyのcssの中にリセットCSSぽいものがあります。

そこで、HTMLのul,liタグにmargin: auto;padding: autoを指定しました。(タグにstyle属性で指定すると、CSSの効果が一番優先されると思ったから)
しかし結果は上図のようにpaddingでInvalid property valueの黄色△がついて、期待する表示になりませんでした。

#質問
buefy(リセットCSS)を使用した場合でも通常のul, liタグをインデントを用いて使用したい場合の対処法を教えていただきたいです。
もしくは、buefyで目標と近いものが実現できるならばそれでも構いません。
(自分がマニュアルを読んだ限りでは近いものが見当たりませんでした)

#備考
インデントの発生する箇所は動的に内容が変化するもので、自前でいろいろ作るより、標準のリスト(ul,li)の機構を利用した方が楽と思い採用しています

行動規範の内容に同意します

回答2件

ベストアンサー

自分好みにスタイリングするのが面倒だということなら
revertで復活させるとか。

css
1ul {
2  margin: revert;
3  padding: revert;
4}

投稿2021/10/17 13:12

recal

総合スコア1128

otaks

2021/10/17 13:17

できました！ありがとうございます！

行動規範の内容に同意します

通常は余白付けたいところがあれば
あたらしく必要な余白を指定しますね。

css
1.ul{
2  margin: 1em 0;
3  padding-left: 40px;
4  list-style-type: disc;
5}
6.ol{
7  margin: 1em 0;
8  padding-left: 40px;
9  list-style-type: decimal;
10}