1

Na minha página HTML eu criei um sidebar e ao lado uma <div> que irá guardar uma <ul>.

Antes de adicionar essa <ul>, a página estava do jeito que eu queria, sem nenhum espaço em cima da sidebar e do conteúdo lateral. Porém ao adicioná-la à <div>, ficou um espaço vazio em cima da página como se existisse uma margem lá, sendo que aparentemente não existe.

Abaixo está o meu código:

#sidebar {
    background-color: rgb(11, 22, 34);
    border: 2px solid #000;
    height: 100vh;
    margin: 0;
    overflow: auto;
    padding: 0px;
    position: fixed;
    text-align: center;
    width: 240px;
}

#user_image {
    background-color: #000;
    border: 2px solid #000;
    cursor: pointer;
    height: 200px;
    margin-top: 20px;
    width: 200px;
}

#list {
    height: 100vh;
    margin-left: 240px;
    width: 800px;
}

body {
    background-color: rgb(11, 22, 34);
    margin: 0;
}
<div id="sidebar">
    <img id="user_image" onclick="chooseUserImage();"/>
    <input id="file_input" type="file" hidden="false"/>
</div>
<div id="list">
    <ul></ul>
</div>

O que está acontecendo? Como posso retirar esse espaço vazio que ficou em cima da página?

0

1 Resposta 1

3

O problema é que, na maioria dos user agent stylesheets, o elemento ul possui um estilo padrão que inclui propriedades que definem uma margin padrão. Veja, o estilo padrão no Chrome é este:

ul {                                      /* user agent stylesheet */
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

Assim, ainda levando em conta que esse elemento é um mostrado em bloco, a margin cria esse espaço adicional.

Para remover, basta sobrepor essa margin padrão, definindo-a para zero:

ul {
  margin: 0;
}
1
  • 1
    Vlw Luiz mestre das web aplicações kkkk <3 29/06/2020 às 14:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .