Wie man dieses Layout repariert? Rand oder Polsterung?

Question

Wie zu beheben this problem?

Das Starren von "Ich habe gelesen und verstanden ..." und der Beginn von "Unterschrift des Antragstellers ..." sind nicht im gleichen Tempo. Einer ist in <p> und einer ist eine Tabelle in <div>. Hier ist mein Code dieses Teils.

<p style="margin:0;"><b>I have read and understand the “Personal Information Collection Statement” attached in this form.</b></p> 
 
<p style="margin:0; height:6px;">&nbsp;</p> 
 
<p style="margin:0;">Please confirm that your instructions have been clearly, accurately, and completely set out in this form 
 
before signing it.</p> 
 
<p style="margin:0;">&nbsp;</p> 
 

 
<div style="width:100%; padding:0px; margin:0px;"> 
 
<table style="width:100%; padding:0px; margin:0px;"> 
 
<tr><td style="width:60%;"> 
 
<div class="row" style="display: flex; flex-direction: row; padding:12px 12px 0px 0px; margin:0px;"> 
 
    <label><strong>Applicant’s signature: </strong></label> 
 
    <span style="flex: 1; display: block;"> 
 
    <input style="width: 100%; 
 
    margin-left: 5px; 
 
    border: none; 
 
    border-bottom: 1px solid #000; 
 
    background: transparent; 
 
    outline: none !important;"/> 
 
    </span> 
 
</div> 
 
</td> 
 
<td style="width:40%;"> 
 
<div class="row" style="display: flex; flex-direction: row; padding:12px 12px 0px 12px; margin:0px;"> 
 
    <label><strong>Date: </strong></label> 
 
    <span style="flex: 1; display: block;"> 
 
    <input style="width: 100%; 
 
    margin-left: 5px; 
 
    border: none; 
 
    border-bottom: 1px solid #000; 
 
    background: transparent; 
 
    outline: none !important;"/> 
 
    </span> 
 
</div> 
 
</td></tr> 
 
<tr><td style="width:60%;"> 
 
<div class="row" style="display: flex; flex-direction: row; padding:13px 12px 0px 0px; margin:0px;"> 
 
    <label><strong>Applicant’s name: </strong></label> 
 
    <span style="flex: 1; display: block;"> 
 
    <input style="width: 100%; 
 
    margin-left: 5px; 
 
    border: none; 
 
    border-bottom: 1px solid #000; 
 
    background: transparent; 
 
    outline: none !important;"/> 
 
    </span> 
 
</div> 
 
</td> 
 
<td style="width:50%;"> 
 
</td></tr> 
 

 
</table> 
 
<p style="margin:0; padding:0px;">&nbsp;</p><p style="margin:0; paddihttp://stackoverflow.com/questions/ask#ng:0px;">&nbsp;</p><p style="margin:0; padding:0px;">&nbsp;</p> 
 
</div>

---

Nach dem "cellspace = 0" Methode verwendet wird, ist es viel besser. Aber zwischen ihnen ist immer noch ein kleiner Zwischenraum. Dies ist die other application I in ähnlicher Weise. (Ich benutze dieses Beispiel, weil es die verschiedenen viel einfacher zeigt, kann das eine oben verwendeten schwieriger ist es, das Problem zu sehen..)

-Code für diesen Artikel:

<h2 style="font-size:140%; margin:0;"><strong>Your Registration Information</strong></h2> 
 
<p style="margin:0; height:15px;">&nbsp;</p> 
 
<div style="width:100%; padding:0px; margin:0px;"> 
 
<table style="width:100%; padding:0px; margin:0px;" cellspacing="0"> 
 
<tr><td style="width:50%;"> 
 
<div class="row" style="display: flex; flex-direction: row; "> 
 
    <label><strong>Name: </strong></label> 
 
    <span style="flex: 1; display: block;"> 
 
    <input style="width: 100%; 
 
    margin-left: 5px; 
 
    border: none; 
 
    border-bottom: 1px solid #000; 
 
    background: transparent; 
 
    outline: none !important;"/> 
 
    </span> 
 
</div> 
 
</td> 
 
<td style="width:50%;"> 
 
<div class="row" style="display: flex; flex-direction: row; margin-left:10px; "> 
 
    <label><strong>Email: </strong></label> 
 
    <span style="flex: 1; display: block;"> 
 
    <input style="width: 100%; 
 
    margin-left: 5px; 
 
    border: none; 
 
    border-bottom: 1px solid #000; 
 
    background: transparent; 
 
    outline: none !important;"/> 
 
    </span> 
 
</div> 
 
</td></tr> 
 
<tr><td style="width:50%;"> 
 
<div class="row" style="display: flex; flex-direction: row; padding:13px 0px 13px 0px;"> 
 
    <label><strong>Phone: </strong></label> 
 
    <span style="flex: 1; display: block;"> 
 
    <input style="width: 100%; 
 
    margin-left: 5px; 
 
    border: none; 
 
    border-bottom: 1px solid #000; 
 
    background: transparent; 
 
    outline: none !important;"/> 
 
    </span> 
 
</div> 
 
</td> 
 
<td style="width:50%;"> 
 
<div class="row" style="display: flex; flex-direction: row; margin-left:10px; padding:13px 0px 13px 0px;"> 
 
    <label><strong>Reference number: </strong></label> 
 
    <span style="flex: 1; display: block;"> 
 
    <input style="width: 100%; 
 
    margin-left: 5px; 
 
    border: none; 
 
    border-bottom: 1px solid #000; 
 
    background: transparent; 
 
    outline: none !important;"/> 
 
    </span> 
 
</div> 
 
</td></tr> 
 
<tr><td style="width:400px;"> 
 
<div class="row" style="display: flex; flex-direction: row; padding: 0px 0px 2px 0px;"> 
 
    <label><strong>Date of submission: </strong></label> 
 
    <span style="flex: 1; display: block;"> 
 
    <input style="width: 100%; 
 
    margin-left: 5px; 
 
    border: none; 
 
    border-bottom: 1px solid #000; 
 
    background: transparent; 
 
    outline: none !important;"/> 
 
    </span> 
 
</div> 
 
</td><td></td></tr> 
 
</table> 
 
</div>

Thank Sie sehr für Ihre Hilfe!