Как удалить белый интервал?

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

.container { 
 
    background: #fff; 
 
    border: 1px solid #ccc; 
 
    margin: auto; 
 
    text-align: left; 
 
    width: 700px; 
 
} 
 
.alignCenter { 
 
    margin: 1em; 
 
} 
 
h1 { 
 
    background-color: #dedede; 
 
    margin: 0; 
 
    min-height: 0; 
 
    padding: 0; 
 
    text-decoration: none; 
 
    text-indent: -8000px; 
 
} 
 
.form_margin { 
 
    margin-bottom: 1.5em; 
 
    margin-top: 3px; 
 
} 
 
body { 
 
    background: #ffffff; 
 
    font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif; 
 
    font-size: small; 
 
    margin: 8px 0 16px; 
 
    text-align: center; 
 
} 
 
.heading { 
 
    font-family: Lucida Grande, Tahoma, Arial, Verdana, sans-serif; 
 
    font-size: small; 
 
} 
 
.message-up { 
 
    vertical-align: top !important; 
 
} 
 
.form_description { 
 
    border-bottom: 1px dotted #ccc; 
 
    clear: both; 
 
    margin-bottom: 1em; 
 
} 
 
.headerImage { 
 
    display: block; 
 
    margin: 10px auto 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head lang="en"> 
 
    <link rel="stylesheet" type="text/css" href="css.css"> 
 
    <meta charset="UTF-8"> 
 
    <title>Welcome to The Mystery Man Website</title> 
 
</head> 
 

 
<body> 
 
    <div class="headerImage"> 
 
    <img src="Images/top.png" alt="top" width="710 "> 
 
    </div> 
 
    <div class="container"> 
 
    <h1>grey bar</h1> 
 
    <div class="alignCenter"> 
 
     <form action="" method="post"> 
 
     <div class="form_description"> 
 
      <h2>User Feedback Form</h2> 
 
      <p>Your suggestions are very appreciated</p> 
 
     </div> 
 
     <!-- Name --> 
 
     <strong><label for="username">Name</label></strong> 
 
     <div class="form_margin"> 
 
      <input type="text" name="username" size="30" id="username" placeholder="Your Full Name" /> 
 
     </div> 
 
     <!--Email--> 
 
     <strong> <label for="email">Email</label> </strong> 
 
     <div class="form_margin"> 
 
      <input type="email" name="email" size="30" id="email" placeholder=" Your Email" /> 
 
     </div> 
 
     <!--Feedback--> 
 
     <strong> <label for="feedback">Feedback</label> </strong> 
 
     <div class="form_margin"> 
 
      <textarea rows="10" cols="93" name="feedback" id="feedback" placeholder="Your Comments.."></textarea> 
 
     </div> 
 
     </form> 
 

 
    </div> 
 
    </div> 
 

 

 

 
</body> 
 

 
</html>

источник

2015-05-03 Steven Stuu

Это своего рода трудно угадать, какой именно стиль вы хотите, так как нет никакого фактического изображения на образец кода. Однако в настоящее время у вас нет интервала с текущим css. Значение нижнего поля равно 0, и нижняя прокладка не определена. Если ваше изображение не имеет своего рода пробел или пробелы внутри себя, между изображением и заголовком формы нет пробелов.

Хотите ли вы сделать тень прямо над заголовком своей формы?
Вы хотите, чтобы изображение создавало тень прямо над формой?
Не могли бы вы связать нас с изображением или предоставить образец для дальнейшего уточнения вашей проблемы и запроса справки?

EDIT: проблема с Yuor заключается в том, что ваше изображение имеет естественную высоту 10 пикселей и естественную ширину 770 пикселей. У вас есть атрибут width=710 внутри вашего элемента <img>, который также влияет на высоту. В настоящее время ни одно из ваших правил не дает ему значение высоты. Вот почему изменение маржи ничего не делает. Когда у вас есть элемент display:block, вы хотите установить ширину и высоту.

Сказав, что, все, что вам нужно сделать, это дать свой <div class="headerImage" элемент а height от 7 до 10px (в зависимости от эффекта вы стремитесь) и значение margin-bottom (вы в настоящее время имеют в 0) чего-либо между 5px -5px (опять же, в зависимости от эффекта, который вы собираетесь делать). Я пробовал широкий диапазон ценностей, но, так как я не знаю, какой вы выглядите, я не могу дать вам точного значения.

В целом, CSS для imageHeader должен выглядеть примерно так:

.headerImage { 
    display: block; 
    margin: 10px auto 0; 
    height:10px;

}

Примечание: для дополнительного контроля, так как образ (770px) шире, чем ваше содержание, вы можете ограничить он, давая .headerImage следующие дополнительные правила:

overflow:hidden; 
width:710px;

(просто как пример)

С уважением Sotkra

источник

2015-05-03 02:17:07 Sotkra

Вот ссылка на изображение, как я не могу добавлять изображения [ссылка] (http://i.imgur.com/fdSGFMr.png?1) –

добавил исправьте мой ответ выше – Sotkra

Ваше изображение не приходит через, так что трудно сказать, что именно вы ищете, но есть два элемента с полями в них, которые создают дополнительное пустое пространство выше, где изображение должно быть:

body { 
    margin: 0 0 16px; 
} 
.headerImage{ 
    0 auto; 
}

Взяв верхний край от них, как показано выше, будет удалено пространство.

jsFiddle

Edit: я добавил позицию абсолютного и верхней 21px к классу headerImage. Это тот эффект, который вы делаете?

new jsFiddle

источник

2015-05-03 02:26:45 symlink

Вот ссылка [наверх] (http://i.imgur.com/fdSGFMr.png?1) –

@StevenStuu см. мое редактирование – symlink

Просто попробуйте это: нужно изменить в этом классе: До изменения:

.headerImage { 
    display: block; 
    margin: 10px auto 0; 
}

После изменения:

.headerImage { 
    display: block; 
    margin: 10px auto 0; 
    position:absolute; 
    width: 100%; 
}

или проверить его здесь: JSFIDDLE NEW

источник

2015-05-05 05:19:06 Lakhan

Как удалить белый интервал?

ответ

Смежные вопросы