Удалите промежутки между DIVs

Question

Этот веб-сайт предназначен для планшетов, и проблема заключается в том, что при изменении размера окна есть запас или какой-то промежуток между тремя div и их фоновыми изображениями (они складываются вертикально). Изображение представляет собой доску из трех частей. Средний div должен иметь возможность расширяться с помощью ввода текста, в то время как верхняя часть статична, а нижняя часть сдвигается вниз по мере увеличения середины.

Ссылка на сайт:

URL больше не доступен

CSS для дивы до сих пор

.blackboard1 { 
background:url(../img/chalkboardtop.png); 
height: 28px; 
background-size:100% auto; 
background-repeat:no-repeat; 
z-index:9999999; 
} 

.blackboard2 { 
background-size:100% auto; 
background:url(../img/chalkboardmiddle.png); 
background-size:100% auto; 
background-repeat:repeat-y; 
z-index:-9999999; 
padding-top:28px; 
padding-bottom:35px; 
overflow:visible; 
} 

.blackboard2 p{ 
color:#fff; 
background-color:none;} 



.blackboard3 { 
background-size:100% auto; 
background:url(../img/chalkboardbottom.png); 
height: 28px; 
background-size:100% auto; 
background-repeat:no-repeat; 
z-index:9999999;  
} 

#blackboardWrap { 
background:url(../img/chalkboardmiddle.png); */ 
background-size:100% auto; 
background-repeat:repeat-y; 
} 

Одно решение, которое я использовал, который я не думаю, что является оптимальным, чтобы иметь образ, который служит средним изображением, также служит четвертым фоном, который обтекает все три div и сидит за ними. Таким образом, когда есть «трещины» между div, вы не можете заметить столько же. Используя это решение, похоже, что это добавит времени загрузки, а также не совсем выглядит правильно.

Answer 1

Пробелы являются из-за полями:

p { 
    margin: 0 0 10px; 
} 

удалите эти поля и посмотреть, если пробелы все еще там или нет.