ドーモ　こんにちは　皆さんはCSSは書いておられますか？　
毎日書いてるよって人も、たまに書くだけだよって人もおられるかとは思いますが、ごくまれに書いてるはずのCSSが上手くHTMLに当たらないって経験は必ずされると思います。そのような時は、CSSで"display:ほにゃらら"と当ててやるとたちまちご機嫌なCSSに立ち返ります。MDN"display"正確な解説はMDNをご覧ください

この原因はHTMLの初期値のスタイル block or inlineという要素がCSSの邪魔をしているのです。
block要素には、block要素のCSSルール(具体例:inline要素とは異なり高さと幅を指定できる。)
inline要素にはinline要素のCSSルール(具体例:inline要素の marginは、左右のみ指定可能。上下は指定不可。)がそれぞれ独自にあります。

わかりやすく言うとサッカー部と野球部が入り乱れてスポーツをしている状況です。最終的には、野球のルールとサッカーのルールの両方を学ばなければいけないのですが、まず最初にこの人は野球部なのかサッカー部なのかを判別できるようにならなければなりません。

HTML5の block or inline の判別の事です。

tag	block	inline
`<html>`	○
`<body>`	○
`<address>`	○
`<article>`	○
`<aside>`	○
`<blockquote>`	○
`<details>`	○
`<dialog>`	○
`<dialog>`	○
`<dd>`	○
`<div>`	○
`<dl>`	○
`<dt>`	○
`<fieldset>`	○
`<figcaption>`	○
`<figure>`	○
`<footer>`	○
`<form>`	○
`<h1>`	○
`<h2>`	○
`<h3>`	○
`<h4>`	○
`<h5>`	○
`<h6>`	○
`<header>`	○
`<hgroup>`	○
`<hr>`	○
`<main>`	○
`<nav>`	○
`<ol>`	○
`<p>`	○
`<pre>`	○
`<section>`	○
`<ul>`	○
`<a>`		○
`<abbr>`		○
`<acronym>`		○
`<audio>`		○
`<b>`		○
`<bdi>`		○
`<bdo>`		○
`<big>`		○
`<br>`		○
`<button>`		○
`<canvas>`		○
`<cite>`		○
`<code>`		○
`<data>`		○
`<datalist>`		○
`<del>`		○
`<dfn>`		○
`<em>`		○
`<embed>`		○
`<i>`		○
`<iframe>`		○
`<img>`		○
`<ins>`		○
`<kbd>`		○
`<label>`		○
`<map>`		○
`<mark>`		○
`<meter>`		○
`<noscript>`		○
`<object>`		○
`<output>`		○
`<picture>`		○
`<progress>`		○
`<q>`		○
`<s>`		○
`<samp>`		○
`<select>`		○
`<slot>`		○
`<small>`		○
`<strong>`		○
`<sub>`		○
`<sup>`		○
`<svg>`		○
`<template>`		○
`<textarea>`		○
`<time>`		○
`<u>`		○
`<tt>`		○
`<var>`		○
`<video>`		○

こちらを丸暗記しておけば、快適なコーディング生活が保障されます。

コメントのご指摘による追記

例外

tag	display
`<li>`	list-item
`<input>`	inline-block
`<script>`	none
`<table>`	block table
`<tbody>`	table-row-group
`<thead>`	table-header-group
`<tfoot>`	table-footer-group
`<tr>`	table-row
`<td>`	table-cell
`<th>`	table-cell
`<colgroup>`	table-column-group
`<col>`	table-column
`<caption>`	table-caption
`<ruby>`	ruby
`<rp>`	none
`<rt>`	ruby-text