How can i break the paragraph property of tables

Question

I am a new learner and can you tell me my bad habits with my code and why this space between image and "Ford" text never closes.

    <!DOCTYPE html>
    <html>
     <title>FiyaskoCar|En Pahalı Arabalar</title>
      <head>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <style>
       
       .container {
      position: relative;
      width: 100%;
    }
    
    
    
    .overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #008CBA;
      overflow: hidden;
      width: 0;
      height: 100%;
      transition: .5s ease;
    }
    
    .container:hover .overlay {
      width: 100%;
    }
    
    .text {
      color: white;
      font-size: 60px;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      white-space: nowrap;
    }
       
       
       figure 
       {
     
        display: flex;
        flex-flow: column;
        
        max-width: 323px;
        margin: auto;
       }
    a
    {
    text-decoration:none;
    }
    
    
    table {
      border-spacing: 90px 0;
      
    }   
    
    figcaption {
        background-color: #222;
        color: #fff;
        font: italic smaller sans-serif;
        padding: 5px;
        text-align: center;
    }
    .special
    {
    width: 299px; height: 166px;
    
    }
    
    
       
       
       </style>
    
    
      </head>
       <body bgcolor="#6B0808" text-color="white" >
    
    <font size = "6">
    <center> <img src=logo.png align="middle" height="140" width="140"/> </center>
    <hr width="500">
    
    <center>
    <p style="background-color:hsla(9, 100%, 64%, 0.5);"><font face = "Comic sans MS" size="5">Fiyasko<span style="color:red">Car</span> 
    Burada her şey ÇOK PAHALI!!!
    </p></font>
    
     <table>
      <tr>
      <figure>
      
    
    <td> 
    <div class="container">
    <a href = homepage.html><img src=fordcar.png class="special"> 
    <div class="overlay">
        <div class="text">Ford</div>
      </div>
    </div>
    
    <figcaption>Ford</figcaption></a>
    
     </td>
    
    
    
    <td> <div class="container">
    <a href = homepage.html><img src=volkswagencar.png class="special"> 
    <div class="overlay">
        <div class="text">Volkswagen</div>
      </div>
    </div>
    
    <figcaption>Volkswagen</figcaption> </td></a>
    
    
    
    <td> <div class="container">
    <a href = homepage.html><img src=bmwcar.jpg  class="special"> 
    <div class="overlay">
        <div class="text">BMW</div>
      </div>
    </div>
     <figcaption>BMW</figcaption> 
    
     </td></a>
      </figure>
     </table>
    
    
    
    </font>
    <hr>
       </body>
    </html>

Please don't link to code at 3rd party sites as those links can die over time. Always include the code you are working with right here in your question. — Scott Marcus, Oct 06 '19 at 18:15
Given how your HTML looks like, you need to start with taking a tutorial. It is full of syntax error, and terribly bad indented. That in itself makes it incredibly error prone. — Asons, Oct 06 '19 at 18:18
@LGSon thanks it is my first html and css experience ever i am taking a tutorial right now please tell me my mistakes thanks for your attention :) — Haydar Damn, Oct 06 '19 at 18:36
No, I can't do that, it is too broad and beyond what we offer here at SO. — Asons, Oct 06 '19 at 19:01
this is your first code, pay attention to the details and in few years you will remember your first code and you will be proud of it ;) — Midz Elwekil, Oct 06 '19 at 20:32

score 1 · Accepted Answer · edited Oct 06 '19 at 18:29

1

This issue happens because the img tag CSS style is not set to display block

img,
img.special 
{
 display: block;
}

the code above will solve the issue for you.

edited Oct 06 '19 at 18:29

G Rohit

3
1

answered Oct 06 '19 at 18:20

Midz Elwekil

441
4
12

How can i break the paragraph property of tables

1 Answers1