Tag p no html com css

Front-end HTML
#1

Estou iniciando no desenvolvimento web e fiz uma página e coloquei duas tags “p” para colocar no “header”, quando tento “formatá-las” com css fica uma linha em branco entre elas.

Usei a seguinte configuração no css para tentar juntá-las mas ainda não consegui. Se alguém puder me ajudar agradeço.

<header>
      <div class="cabecalho">
          <p id="sistema"><b>OSWEB</b> - <small>Ordem de Serviço</small></p>            
          <p  id="versao">Versão: 00.00c - 03/03/2020</p>
      </div>        
      <br/><br/>
      
      <div class="titulo">
         <h1>Menu Principal</h1>
      </div>
      
    </header>

.cabecalho {
text-align: right;
line-height: 17px;
height: 7px;
width: 940px;
background-color: #ADD8E6;
}

#sistema {
color: white;
display: block;
background-color: #ADD8E6;
}

#versao {
color: white;
display: block;
background-color: #ADD8E6;
}

#2

Tente remover a margem dos elementos:

#sistema {
  color: white;
  display: block;
  background-color: #ADD8E6;
  margin-bottom: 0px;
}
#versao {
  color: white;
  display: block;
  background-color: #ADD8E6;
  margin-top: 0px;
}
#3

vou verificar e dou retorno. Obrigado.

#4

Como o @Jelson1 disse, o problema é a margin.

Por padrão, a tag p vem com margin, tanto em cima quanto em baixo.

Uma prática bem comum é tirar a margin e padding de todas as tags

Exemplo:

* {
  margin: 0;
  padding: 0;
}
#5

era isso mesmo, testei e funcionou. Obrigado.