Comment se débarrasser des lacunes de marge entre colonnes corporelles dans HTML (modèle CSS d'occasion, mais moi-même édité beaucoup)

Essayez ceci:

.columntopmiddlebottom * {
    margin-block-start: 0;
    margin-block-end: 0;
}

Il s'agit d'environ https: //developer.mozilla. Org / fr-US / DOCS / Web / CSS / CSS_BOX_MODEL / MASTERING_MARGIN_COLLASSING

Les marges supérieure et inférieure des blocs sont parfois combinées (effondrées) dans une marge unique dont la taille est la plus grande des marges individuelles (ou une seule d'entre elles, si elles sont égales), un comportement appelé marge s'effondrant. Notez que les marges des éléments flottants et absolument positionnés ne s'effondrent jamais. P> blockQuote>

réinitialiser la marge sur hn et p. p>

p>

<div class="header">
  <h1>Header</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<div class="row" style="height: 717px">
  <div class="columntopmiddlebottom" style="background-color:#F7DC6F; 
    style=" height: 211px>
    <h2>People</h2>
    <p style="height: 214px">1</p>
  </div>

  <div class="columntopmiddlebottom" style="background-color:#F7DC6F; 
     style=" height: 212px>
    <h2 style="height: 21px">2</h2>
    <p style="height: 171px">info</p>
  </div>

  <div class="columntopmiddlebottom" style="background-color:#F7DC6F; 
     style=" height: 212px>
    <h2 style="height: 37px">3</h2>
    <p style="height: 193px">info</p>
  </div>
</div>

Vous pouvez utiliser ce package https://necolas.github.io/normalize.css/ en CSS pour éliminer la marge et le rembourrage pour l'élément

P>

<header>
    <h1>Header</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eum minus aliquam dolorum sit molestiae architecto.</p>
  </header>
  <section class="one">
    <h2>Section One</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eum minus aliquam dolorum sit molestiae architecto.</p>
  </section>
  <div class="two">
    <h2>Gallery</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eum minus aliquam dolorum sit molestiae architecto.</p>
  </div>
  <article class="three">
    <h2>News</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eum minus aliquam dolorum sit molestiae architecto.</p>
  </article>
  <aside class="four">
    <h2>Aside NavBar</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eum minus aliquam dolorum sit molestiae architecto.</p>
  </aside>
  <footer >
    <h2>Aside NavBar</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eum minus aliquam dolorum sit molestiae architecto.</p>
  </footer>

Une autre version simple à l'aide de flexbox.

p>

<div class="header">
	<h1>Header</h1>
	<p>Resize the browser window to see the responsive effect.</p>
</div>

<div class="row">
	<div class="column">
		<h2>People</h2>
		<p>1</p>
	</div>

	<div class="column">
		<h2>2</h2>
		<p>info</p>
	</div>

	<div class="column">
		<h2>3</h2>
		<p>info</p>
	</div>
</div>