случайные поля в 15px? - PullRequest
Новая
       3

случайные поля в 15px?

2 голосов
/ 31 января 2011

Я получаю случайные верхние и нижние поля 15px и не знаю, откуда они берутся.

Это не происходит в IE, только FF и Chrome.
Вы можете увидеть живой примерв http://test.webspirited.com/hailwood

Случайное заполнение http://webspirited.com/example.png.

Соответствующий HTML 

<div id="pageContent">
  <div id="contentHead">Sample Page</div>
  <div id="contentBody">
    <div id="contentNoSidebar">
      <p>Here is content</p>
      ...
      <p>Here is content</p>
    </div>
  </div>
</div>

Соответствующий CSS 

#pageContent {
    background-color: #fff;
    padding: 10px;
}

#contentHead {
    background: url(../images/contentHeader.png) repeat-x;
    height: 33px;
    width: 882px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    line-height: 34px;
    padding-left: 48px;
    text-transform: uppercase;
}

#contentBody{
    background-color: #d4d3d1;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-radius: 0 0 10px 10px;
    border: 1px solid #8b8b8b;
}

#contentNoSidebar{
    background-color: #000;
}

Ответы [ 5 ]

4 голосов
/ 31 января 2011

Если вы говорите о полях, окружающих каждый тег <p>, это присуще таблице стилей агента пользователя.По умолчанию теги абзаца имеют окружающее поле.Если вы сделаете что-то вроде: 

p { margin: 0; padding: 0; }

, вы сможете избавиться от поля / отступа.

1 голос
/ 31 января 2011

Теперь вы добавили тестовое изображение, я знаю, что вы имеете в виду.

Используйте этот CSS для решения проблемы: 

p { margin: 0; padding: 16px 0 }

Короче, укажите одинаковое расстояние между абзацами, используя padding вместо margin.

1 голос
/ 31 января 2011

Абзацы по умолчанию имеют вертикальное поле 1em (верх и низ, но они могут перекрываться). Я предполагаю, что вы говорите о том, что у div есть нижнее поле, но это не так, это верхнее поле p ниже него.

0 голосов
/ 31 января 2011

Ваши вопросы, кажется, уже решены, но вы можете начать использовать сброс CSS, чтобы переопределить материал таблицы стилей агента пользователя для всего.Упрощает стилизацию ваших веб-страниц, чтобы они выглядели одинаково в большинстве браузеров. 

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
0 голосов
/ 31 января 2011

Удалите команду - -moz-border-radius: 0 0 10px 10px; в вашем теле содержимого css и используйте поле: 0 px;отступы на основе вашего контента. Это сработает, это и есть причина репутации.Используйте firebug в вашем браузере mozila, мы легко найдем ошибки.

...