Добавить границу в верхней части моего сайта без изображения

Question

Я пытаюсь выяснить, как добавить границу в самый верх моего блога.

Я знаю, как это сделать с изображением, с фоновым изображением и повторением по горизонтали.

body { 
    background-image: url("http://bit.ly/1KTEMHF"); 
    background-repeat: repeat-x; 
    background-color: #EEEEEE; 
} 

Смотрите пример здесь: http://jsfiddle.net/9ybu5yfq/

Однако, я не уверен, как это сделать, если я просто хочу (гладкую) границу простой. Я знаю, что у меня, очевидно, есть квадрат как образ, и так оно и будет работать, но я думаю, что есть лучший/простой способ сделать это.

До сих пор я нашел на другие ответы на этом сайте, что я могу сделать это так:

body { 
    border-top: 15px solid #F2828E; 
    background-color: #EEEEEE; 
} 

(См скрипку здесь: http://jsfiddle.net/uaoq6usn/)

Однако, если я делаю это так, линия или граница, не идет из стороны в сторону, есть пробел, и он действительно не касается верхней части.

Чувствуете разницу:

Любые идеи о том, почему это происходит и как я могу это исправить? Или нет другого способа добавить границу вверху сайта, но с изображением?

Answer 1

body { 
    border-top: 15px solid #F2828E; 
    background-color: #EEEEEE; 
    margin: 0; 
} 

должен это сделать. По умолчанию у вас по умолчанию есть верхняя граница. Вы можете установить его в ноль, и он будет работать

Answer 2

Добавить margin:0

т.е.

body { 
    border-top: 15px solid #F2828E; 
    background-color: #EEEEEE; 
    margin:0; 
}