CSS me genra un espacio en blanco

estoy haciendo una página web, en este caso el layout, в общем, проблематично CSS, в том числе и роды, в том числе и в фоновом режиме («обои») и эль footer. El código es el siguiente:

* {
margin: 0;
padding: 0;
font-family: sans-serif;
}

a {
text-decoration: none;
color: inherit;
}

.header {
width: 100%;
height: 60px;
background-color: #333;
display: flex;
align-items: center;
color: #FFFFFF;
}

.logo {
height: 40px;
width: 200px;
padding: 0px 50px 0px 50px;
fill: #000;
}

.input_query {
flex-basis: 25%;
height: 18px;
border: 1px solid #282828;
border-radius: 3px;
padding: 5px;
}

.log_in {
margin-left: auto;
color: #DCDCDC;
}

.log_in_btn {
background-color: #3F3F3F;
margin: 0px 50px 0px 0px;
padding: 5px;
border: 1px solid #282828;
border-radius: 2px;
}

.wallpaper {
width: 100%;
height: 100%;
}

footer {
width: 100%;
height: 100px;
background-color: #333;
}
<body>
    <header class="header">
        <a href=""><img class="logo" src="assets/images/logo-web.png"></a>
        <input class="input_query" placeholder="Search...">
        <section class="log_in">
            <a href="" class="log_in_btn">Sing in</a>
            <a href="" class="log_in_btn">Create an account</a>
        </section>
    </header>
    <img src="assets/images/wallpaper.png" class="wallpaper">
    <footer>Footer</footer>
</body>
2
задан 13.12.2016, 20:27
4 ответа

Знаменитое загадочное место следует, что он по вине DOCTYPE строгие и современные.

Давайте видеть примеры с этим куском кода:

<table border="1">
  <tbody>
    <tr>
      <td>
        <img src="http://placehold.it/350x150">
      </td>
    </tr>
  </tbody>
</table>

Если у нас есть doctype: HTML 4.01 Transitional мы можем видеть, что все находится в Вашей команде:

introducir la descripción de la imagen aquí

Видеть Demo


Однако... Если мы используем сейчас строгий DOCTYPE HTML 4.01 Strict или современный HTML5 :

introducir la descripción de la imagen aquí

Видеть Demo

мы видим, что сейчас у нас появляется место между изображением и краем!


Если мы читаем немного в Mozilla Foundation о загадочных пустотах, он говорит нам:

Начиная с 2001 и расцвета соответствующих браузеров, которые показывают страницы используя HTML и CSS вместо их собственных алгоритмов рисунка, и из-за мало известной детали спецификации CSS, каждый рисунок, основанный на разметке с подмостками и изображениями espaciadoras превратился в визуальное бедствие надеясь быть посещаемым. Все то, во что ты нуждаешься, - современный браузер, соответствующий DOCTYPE, и... Бум!

Сейчас мы знаем, откуда приходит тема :)

Есть несколько способов / приемов это решать:

Заключение:

Согласно твоей разметке может подавать тебя одна, что другое решение / прием для этой проблемы. В твоем случае ты можешь использовать: display: inherit;, display: block; или display: flex;

Читать больше о рекомендациях Mozilla Foundation

2
ответ дан 24.11.2019, 12:06
  • 1
    Я habí в найденный часто с этой проблемой и sabí в как решать это, но не tení ни в идея, которой tení в relació n с doctype. Интересный informació n. –  blonfu 14.12.2016, 09:41

Я не уверен, вирус или функция ли это inline-block но это что-то, что происходит всегда. В твоем случае ты используешь изображение, что по умолчанию Ваша стоимость display он inline-block, чтобы это решать ты можешь помещать его display:block в изображение и уже будь, он скроет место.

1
ответ дан 24.11.2019, 12:06

Перед тем, как отвечать тебе позволь мне давать тебе один совет и дело в том, что сначала ты не поместил один <section> внутри одного <header> для этого, существуют <div>. section - для тела HTML.

Сейчас отвечая на твой назначенный по умолчанию вопрос всегда остается линия между section и <footer>, чтобы мочь снимать эту линию добавлять один margin-top: -3px в footer, это осталось бы тогда так.

footer {
    width: 100%;
    height: 100px;
    background-color: #333;
    margin-top: -3px;
    }
0
ответ дан 24.11.2019, 12:06
  • 1
    Ах стой, спасибо, он думал, что < section> он был má s especí fico, что < div>. –  Raúl 13.12.2016, 20:43
  • 2
    @Raú l он не имеет ничего общего с section, в самом деле в твоем có я говорю место está между изображением и footer. Проблема - свойство display:inline-block –  blonfu 13.12.2016, 20:47
  • 3
    Уже уже, я referí в в это, чего он не помещал <section> и использовал <div> –  Raúl 13.12.2016, 20:48

Уже я смог решить это, не porquГ©, но комментарий человека, который сказал это мне не я apraece. Она soluciГіn он был aГ±adirle в .wallpaper display: flex;, но я не понимаю porquГ©

0
ответ дан 24.11.2019, 12:06
  • 1
    функционируй с display: flex, потому что ты меняешь назначенные по умолчанию display изображения, также оно ты будет функционировать с display: block и с другой стоимостью display. –  blonfu 13.12.2016, 20:50
  • 2
    Вероятно ты решил проблему для visionado в твоем браузере с ' display: flex'. Deberí схвати тестировать это в других браузерах. В любом случае, я agregarí в ' border: 0' во все элементы (так как только ты применяешься ' margin: 0' и ' padding: 0'). Я понимаю, что проблема - модель ящиков, которая использует каждый браузер. –  marcarand 14.12.2016, 04:31