html - Move the line down

Question

I have an issue with moving the line from the <hr> down a little bit. I want it to be somewhere between the address and the QR code. I have tried adding borders, padding, margins.

<td style="padding-left: 0px;">
<div style="align: center; margin: 3px; border: 0px solid blue; width: 480px; height: 380px; float: left; text-align: center;">
<div style="text-align: center; margin-top: 10px; border: 0px solid black; height: 135px;"><strong><span style="font-family: 'Fjalla One'; sans-serif; font-size: 35pt; line-height: 1.2;"></div>
<div style="text-align: center; margin-top: 0px; border: 0px solid black; height: 160px;"><strong><span style="font-family: 'Fjalla One'; sans-serif; font-size: 35pt; line-height: 1.2; margin-bottom: 30px; color: #ac1f23;">[Persons.First_Name]<br /><span style="font-size: 35pt; font-family: 'Fjalla One'; color: #ac1f23;">[Persons.Family_Name]</span></span></strong><span style="font-family: 'Fjalla One'; sans-serif; font-size: 19pt;"><br />[Persons.Company]</span><br /><span style="font-family: 'Fjalla One'; sans-serif; font-size: 19pt;"><span style="font-family: 'Fjalla One'; sans-serif; font-size: 19pt; padding-bottom: 10px;">[Persons.City], [Persons.Address_3]</span></span><br />
<div style="background-color: #ac1f23; width: 450px; margin-left: 15px; margin-right: 5px;"><hr style="height: 2px; border: none; background-color: #ac1f23; align: center;" /></div>
</div>
<div style="text-align: center; height: 90px; margin-top: 10px; border: 0px solid purple; vertical-align: middle;">&#160;</div>
<div style="text-align: center; height: 90px; margin-top: 10px; border: 0px solid purple; vertical-align: middle;"><span style="font-family: 'Fjalla One'; sans-serif; font-size: 20pt;">[General.QRCode-PersonId][General.Barcode-PersonId]</span></div>
<div style="text-align: center; height: 80px; margin-top: 10px; border: 0px solid purple; vertical-align: middle;"><span style="font-size: 10pt;"><span style="font-family: 'Fjalla One'; sans-serif; margin-top: 10px;">[ActivityPerPerson.Start] - [ActivityPerPerson.Activity_Name_2] -&#160;</span><span style="font-family: font-family: 'Fjalla One';">[ActivityPerPerson.End]</span><span style="font-family: 'Fjalla One';"><img src="abc" alt="" /></span></span><span style="font-family: 'Fjalla One'; sans-serif; font-size: 20pt; padding-bottom: 10px;"><br /><img src="[Categories.Category_Caption_For_Badge]" alt="LPS_Chef_BADGE" width="450" /></span></div>

标签： htmlcss

Answer 1

您可以使用以下方法将 a 添加到行 ( )margin-top的父元素 ( ) 中。您还可以将 设置为元素以在行前获得一些空间：div<hr>margin-top<hr>

<td style="padding-left: 0px;">
<div style="align: center; margin: 3px; border: 0px solid blue; width: 480px; height: 380px; float: left; text-align: center;">
<div style="text-align: center; margin-top: 10px; border: 0px solid black; height: 135px;"><strong><span style="font-family: 'Fjalla One'; sans-serif; font-size: 35pt; line-height: 1.2;"></div>
<div style="text-align: center; margin-top: 0px; border: 0px solid black; height: 160px;"><strong><span style="font-family: 'Fjalla One'; sans-serif; font-size: 35pt; line-height: 1.2; margin-bottom: 30px; color: #ac1f23;">[Persons.First_Name]<br /><span style="font-size: 35pt; font-family: 'Fjalla One'; color: #ac1f23;">[Persons.Family_Name]</span></span></strong><span style="font-family: 'Fjalla One'; sans-serif; font-size: 19pt;"><br />[Persons.Company]</span><br /><span style="font-family: 'Fjalla One'; sans-serif; font-size: 19pt;"><span style="font-family: 'Fjalla One'; sans-serif; font-size: 19pt; padding-bottom: 10px;">[Persons.City], [Persons.Address_3]</span></span><br />
<div style="background-color: #ac1f23; width: 450px; margin-left: 15px; margin-right: 5px;margin-top:50px;"><hr style="height: 2px; border: none; background-color: #ac1f23; align: center;" /></div>
</div>
<div style="text-align: center; height: 90px; margin-top: 10px; border: 0px solid purple; vertical-align: middle;">&#160;</div>
<div style="text-align: center; height: 90px; margin-top: 10px; border: 0px solid purple; vertical-align: middle;"><span style="font-family: 'Fjalla One'; sans-serif; font-size: 20pt;">[General.QRCode-PersonId][General.Barcode-PersonId]</span></div>
<div style="text-align: center; height: 80px; margin-top: 10px; border: 0px solid purple; vertical-align: middle;"><span style="font-size: 10pt;"><span style="font-family: 'Fjalla One'; sans-serif; margin-top: 10px;">[ActivityPerPerson.Start] - [ActivityPerPerson.Activity_Name_2] -&#160;</span><span style="font-family: font-family: 'Fjalla One';">[ActivityPerPerson.End]</span><span style="font-family: 'Fjalla One';"><img src="abc" alt="" /></span></span><span style="font-family: 'Fjalla One'; sans-serif; font-size: 20pt; padding-bottom: 10px;"><br /><img src="[Categories.Category_Caption_For_Badge]" alt="LPS_Chef_BADGE" width="450" /></span></div>

注意：不要像这样使用内联 CSS！很难阅读。在外部 CSS 文件或两者之间使用 CSS 类 ( .classname) 或 id ( ) （但文件更好）。#idname<style>