alexwong820 alexwong820 - 3 months ago 7
HTML Question

How to fix this layout? Margin or padding?

How to fix this problem?

The staring of "I have read and understand..." and the starting of "Applicant’s signature..." are not at the same pacing. One is in

<p>
and one is a table in
<div>
. Here is my code of this part.



<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>








After using the "cellspace=0" method, it is much better. But there is still a small space between them. This is the other application I in a similar way. (I use this example because it can show the different much more easier. The one used above is harder to see the problem.)

Code for this part:



<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 you very much for your help!

Answer

I have added margin-left: -1px; in the required div.

<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;  margin-left: -1px;">
  <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; margin-left: -1px;">
  <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;  margin-left: -1px;">
  <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>

Comments