how can i add a newline or breakline on css-CodePudding

my code is in codepen how can i add breakline / new line between title and table ?

  <li >
      
    <H1>TITLE</H1> 
     <br />
        <table border=1>
          <tr>
            <td>qdf</td>
             <td>qdf</td>
          </tr>
        </table>     
      </li>

and css:

.slide {  
   width: 100%;
  height: 100%;
  flex: 1 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

CodePudding user response：

The default flex direction is row. Either you can remove the flex layout or make the flex-direction: column.

However, br is not the correct way to adjust spaces between flex items. Use properties like justify-content, gap, row-gap, column-gap

.slide {  
   width: 100%;
  height: 100%;
  flex: 1 0 100%;
  justify-content: center;
  display: flex;
  flex-direction:  column;
  align-items: center;
}

<li >
      
    <H1>TITLE</H1> 
     <br />
        <table border=1>
          <tr>
            <td>qdf</td>
             <td>qdf</td>
          </tr>
        </table>     
      </li>

CodePudding user response：

 <section >
  <button  id="slide-arrow-prev">
    &#8249;
  </button>
  <button  id="slide-arrow-next">
    &#8250;
  </button>
  <ul  id="slides-container">
    <li >
      <h1 >TiTLE</h1> 
        <table border=1>
          <tr>
            <td>qdf</td>
             <td>qdf</td>
          </tr>
        </table> </li>
    <li ></li>
    <li ></li>
    <li ></li>
  </ul>
</section>

<footer>
  Pen by <a href="#" target="_blank" rel="noopener">Jemima Abu</a> <span >&hearts;</span>
</footer>

and use this css:

.slide {
/*   width: 100%; */
  height: 100%;
  flex: 1 0 100%;
   display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}