CSS - Как удалить нежелательную границу между элементами?

Это, кажется, обычная проблема, но ни одно из решений, которые я нашел, не сработало для меня.

HTML

<html>
    <head>
        <link rel="stylesheet" href="c/lasrs.css" type="text/css" />
    </head>
    <body>
        <div class="header">
            <img src="i/header1.png">
        </div>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. 
               Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, 
               massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, 
               bibendum at, posuere sit amet, nibh.</p>
        </div>
    </body>
</html>

CSS

body {
    min-width: 950px;
    background-color: #FFFFFF;
    color: #333333;
}

.header {
    width: 950px;
    height: 171px;
    margin: 0px auto;
    padding: 0px;
    background-color: #CCCCCC;
    position: relative;
}

.content {
    width: 950px;
    margin: 0px auto;
    padding: 0px;
    background-color: #E3EEF9;
    position: relative;
}

Я намеренно сломал путь изображения и установил цвет фона для div .header, чтобы я мог видеть, касаются ли они. Эта страница выглядит так:

Как вы можете видеть, я пробовал установить дополнение и поля на обоих divs на 0.

Почему все еще есть пробел?

Ответ 1

Это связано с тем, что:

Браузеры автоматически добавляют некоторое пространство (margin) до и после каждого элемента <p>. Поля могут быть изменены с помощью CSS (с свойствами поля).

Итак, попробуйте:

p {
     margin: 0px;
}

Примечание: браузеры добавляют стиль по умолчанию для других элементов! Это может быть полезным и раздражающим в разных ситуациях. Есть три способа сделать это:

Полностью удалить все стили по умолчанию, которые могут иметь браузеры. Это достигается с помощью стилей Reset. Наиболее популярным является Eric Meyers CSS Reset. Если вы хотите изо всех сил и начать абсолютно чистый запуск в любом браузере, используйте технику Мейера. Этот метод предпочтительнее использования медленного подхода *{ margin:0; padding:0; } Reset (Читайте здесь, почему)
Нормализовать таблицу стилей по умолчанию. Большое раздражение веб-дизайнеров заключается в том, что разные браузеры используют разные стили по умолчанию. Однако полный Reset имеет трудоемкую проблему переопределения стилей всех элементов. Таким образом, вы можете нормализовать все стили по умолчанию для браузеров, используя предопределенный набор последовательных и разумных стилей по умолчанию. Общий подход заключается в использовании normalize.css для этого (Twitter, Github и SoundCloud используют это!)
Отрегулируйте значения по умолчанию, если необходимо, или сознательно обходите значения по умолчанию. Самый распространенный способ (не сказать, что это лучший способ) работать со значениями по умолчанию - знать, что они существуют, и при необходимости корректировать их. Стили по умолчанию существуют по какой-то причине: они могут помочь разработчикам быстро получить внешний вид. Выглядит ли слегка немного? Просто отрегулируйте стили соответственно. Однако убедитесь, что вы используете правильные метки для правильных элементов. Например, вместо удаления полей <p> для встроенных текстов вы должны использовать тег <span> (по умолчанию margin)

Это поможет вам понять, что происходит за кулисами.

Ответ 2

Ваши поля в абзацах переполняются из div (это нормально) вы можете либо установить

p {
   margin: 0;
}

или применить переполнение, скрытое к вашим divs

div {
  overflow: hidden;
}

Ответ 3

использование

*{
    padding:0;
    margin:0;
}

в вашем стиле

Ответ 4

попробуйте следующее:

http://jsfiddle.net/JKS3k/3/

CSS

p{
   margin:0;           
}

ИЛИ

* {
margin:0;
padding:0;
}

Ответ 5

Добавьте это:

*{
    margin: 0;
    padding: 0;
}

Ответ 6

Оба divs касаются друг друга. По умолчанию маркер/дополнение DIV всегда 0, поэтому ваши изменения не влияют. <p> однако имеет маркер, и, поскольку он вложен в div, похоже, что у div есть отступы.

p {
    margin: 0;
}

исправит это.

Ответ 7

Попробуйте использовать некоторые reset css, потому что во всех браузерах есть некоторые поля ссылок по умолчанию, paddings, line-height, font-styling и вам нужно начинать с элементов без стилизации.

Я рекомендую использовать Eric Meyer reset CSS (http://meyerweb.com/eric/tools/css/reset/)