2

10 月のランディング ページ

開発中のページでいくつかの問題が発生しています。上のページでは、ページの下部に向かって 3 つのボックスが表示されます。2 つのボックスは同じ形式で、3 つ目のボックスには独自の問題があります。

ボックス 1 & 2 (枠のないもの)

問題: どういうわけか、リスト項目には、スタイル シートで指定されていない (明らかに) 余分な左パディングがあります - 少なくとも意図的ではありません。彼らは他の場所からパディングを継承していますか? 両方のボックスでこの問題が発生しているようです。

ボックス 3 (寄付ボタンのあるもの)

問題: ボタンの一番上の行は、余分なパディングまたはマージンをどこかから継承しているように見えますが、どこにあるのかわかりません。

説明や提案はありますか??

*UPDATE: わかりましたので、パディングを 0px に設定して ul に新しいルールを追加することで、ボックス 1 と 2 の問題を修正しました。どこからパディングを継承していたのかわかりませんが、うまくいきました。

4

1 に答える 1

2

ブラウザごとに異なるデフォルト設定が使用されているため、CSS リセットを使用してデフォルトを特定の値 (0px など) に設定することを選択する人もいます。これで問題が解決するかどうかを確認してください。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
于 2009-10-07T21:33:27.550 に答える