div之间不需要的空格
div之间的空白使我发疯，我看不到错误在哪里，请您能帮助我，我会谢谢你。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="robots" content="noindex, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="x-apple-disable-message-reformatting" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
<title>Newsletter</title>
<style type="text/css">
body {
margin: 0!important;
padding: 0!important
}
p {
margin: 0
}
table {
border-collapse: collapse;
min-height: 0!important
}
td {
border-collapse: collapse;
white-space: -moz-pre-wrap!important;
white-space: -webkit-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: normal;
word-break: normal;
white-space: normal
}
.main-table,
.newsletter-row,
.newsletter-row .inner-row-table {
width: 600px
}
.component.text-component a {
color: #337ab7;
text-decoration: none
}
.component.text-component a:focus,
.component.text-component a:hover {
color: #23527c;
text-decoration: underline;
outline: 0
}
@media only screen and (max-width:640px) {
body {
width: auto!important
}
.main-table,
.newsletter-row,
.newsletter-row .inner-row-table {
max-width: 600px;
width: 100%
}
.newsletter-row .inner-row-table {
table-layout: fixed
}
.slot {
width: 100%!important;
max-width: 100%!important;
display: block
}
.slot.ONE_FOURTH {
width: 50%!important;
max-width: 50%!important;
display: inline-block
}
.component .newsletter-button-link .button {
width: auto!important
}
.component .image {
mso-line-height-rule: exactly
}
.component,
.image table {
width: 100%!important
}
.component .image img {
max-width: 100%!important
}
.slot.ONE_FOURTH .image img {
max-width: 100%!important
}
.component .image img.not-resized {
width: 100%!important
}
.slot-spacing {
display: none
}
.slot .component .newsletter-main-content .image.article-image-container {
width: 33.3%!important
}
#bg_color_table {
width: 100%
}
.non-responsive .slot-spacing {
display: table-cell
}
.non-responsive .slot-spacing.CENTER {
display: table-cell
}
.non-responsive .slot {
display: table-cell
}
.non-responsive .slot.FULL {
width: auto!important;
max-width: 100%!important
}
.non-responsive .slot.ONE_THIRD {
width: auto!important;
max-width: 33.3%!important
}
.non-responsive .slot.HALF {
width: auto!important;
max-width: 50%!important
}
.non-responsive .slot.TWO_THIRDS {
width: 66.6%!important;
max-width: 66.6%!important
}
.non-responsive .slot.ONE_FOURTH {
width: auto!important;
max-width: 25%!important
}
.non-responsive .slot.FULL .component .image img {
max-width: 100%!important
}
.non-responsive .slot.ONE_THIRD .component .image img {
max-width: 100%!important
}
.non-responsive .slot.HALF .component .image img {
max-width: 100%!important
}
.non-responsive .slot.TWO_THIRDS .component .image img {
max-width: 100%!important
}
.non-responsive .slot.ONE_FOURTH .component .image img {
max-width: 100%!important
}
.non-responsive .slot.HALF .text_container {
display: table-cell;
width: 530px
}
}
@media only screen and (max-width:450px) {
body {
width: auto!important
}
.main-table,
.newsletter-row,
.newsletter-row .inner-row-table {
max-width: 600px;
width: 100%
}
.newsletter-row .inner-row-table {
table-layout: fixed
}
.slot {
width: 100%!important;
max-width: 100%!important;
display: block
}
.slot.ONE_FOURTH {
width: 50%!important;
max-width: 50%!important;
display: inline-block
}
.component .newsletter-button-link .button {
width: auto!important
}
.component .image {
mso-line-height-rule: exactly
}
.component,
.image table {
width: 100%!important
}
.component .image img {
max-width: 100%!important
}
.slot.ONE_FOURTH .image img {
max-width: 100%!important
}
.component .image img.not-resized {
width: 100%!important
}
.slot-spacing {
display: none
}
.slot .component .newsletter-main-content .image.article-image-container {
width: 33.3%!important
}
#bg_color_table {
width: 100%
}
.non-responsive .slot-spacing {
display: table-cell
}
.non-responsive .slot-spacing.CENTER {
display: table-cell
}
.non-responsive .slot {
display: table-cell
}
.non-responsive .slot.FULL {
width: auto!important;
max-width: 100%!important
}
.non-responsive .slot.ONE_THIRD {
width: auto!important;
max-width: 33.3%!important
}
.non-responsive .slot.HALF {
width: auto!important;
max-width: 50%!important
}
.non-responsive .slot.TWO_THIRDS {
width: 66.6%!important;
max-width: 66.6%!important
}
.non-responsive .slot.ONE_FOURTH {
width: auto!important;
max-width: 25%!important
}
.non-responsive .slot.FULL .component .image img {
max-width: 100%!important
}
.non-responsive .slot.ONE_THIRD .component .image img {
max-width: 100%!important
}
.non-responsive .slot.HALF .component .image img {
max-width: 100%!important
}
.non-responsive .slot.TWO_THIRDS .component .image img {
max-width: 100%!important
}
.non-responsive .slot.ONE_FOURTH .component .image img {
max-width: 100%!important
}
.non-responsive .slot.HALF .text_container {
display: table-cell;
width: 530px
}
}
</style>
</head>
<body style="padding: 0px; margin: 0px; font-family: arial, sans-serif; background-color: rgb(0, 240, 240); background-repeat: no-repeat no-repeat;" background="" border="0">
<table align="center" class="wrapper-table" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" background="" style="background-color: rgb(0, 240, 240); background-repeat: no-repeat no-repeat;">
<tbody>
<tr>
<td class="wrapper-td" valign="top" align="center" background="" style="background-color: rgb(0, 240, 240); background-repeat: no-repeat no-repeat;">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="main-table">
<tbody>
<tr>
<td align="center" class="content">
<table data-structure-type="row" data-row-type="HALF" data-row-id="aefe3328-fced-4167-8a60-0e3046e390e8" data-row-behavior="NORMAL" data-row-repeat-count="5" data-row-sort-products="Orders" data-row-selected-website="3aa4649c98704d1987869ad178988660"
width="600" cellpadding="0" cellspacing="0" class="newsletter-row non-responsive">
<tbody>
<tr>
<td class="row-td" background="" valign="top" bgcolor="#ffffff" style="background-repeat: no-repeat no-repeat;">
<table width="100%" class="inner-row-table" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="slot HALF" data-structure-type="slot" data-slot-type="HALF" width="300" cellpadding="0" cellspacing="0" align="left" valign="top" style="background-color: rgb(255, 255, 255); max-width: 300px; width: 300px; overflow: visible;">
<table class="component text-component" data-component-type="text" cellspacing="0" cellpadding="0" width="300" style="clear: both; background-color: rgb(255, 255, 255);">
<tbody>
<tr>
<td style="padding: 10px; word-wrap: break-word; word-break: break-word;">
<div class="text_container newsletter-main-content" style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; line-height: 1.3; font-size: 16px;">
<p style="margin: 0px;"><span style="font-size:16px;"><span style="font-family:Courier,monospace;"><strong>Dear {client_name}</strong></span></span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="component text-component" data-component-type="text" cellspacing="0" cellpadding="0" width="300" style="clear: both; background-color: rgb(255, 255, 255);">
<tbody>
<tr>
<td style="padding: 10px; word-wrap: break-word; word-break: break-word;">
<div class="text_container newsletter-main-content" style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; line-height: 1.3; font-size: 16px;">
<p style="margin: 0px;"><span style="font-size:14px;"><span style="font-family:Verdana,Geneva,sans-serif;">This is a confirmation that you have booked a <strong>{service_name}</strong></span></span>
</p>
<p style="margin: 0px;"> </p>
<p style="margin: 0px;"><span style="font-size:14px;"><span style="font-family:Verdana,Geneva,sans-serif;">Extras:<strong>{extras}</strong><br />
Total Price:<strong>{total_price}</strong></span></span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="slot HALF" data-structure-type="slot" data-slot-type="HALF" width="300" cellpadding="0" cellspacing="0" align="left" valign="top" style="background-color: rgb(255, 255, 255); max-width: 300px; width: 300px; overflow: visible;">
<table class="component text-component" data-component-type="text" cellspacing="0" cellpadding="0" width="300" style="clear: both; background-color: rgb(255, 255, 255);">
<tbody>
<tr>
<td style="padding: 10px; word-wrap: break-word; word-break: break-word;">
<div class="text_container newsletter-main-content" style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; line-height: 1.3; font-size: 16px;">
<h2><span style="font-size:16px;"><span style="font-family:Courier,monospace;">Bruz Cleaning Service LLC<br />
Miami, FL </span></span>
</h2>
<h2><span style="font-size:16px;"><span style="font-family:Courier,monospace;">{appointment_date}</span></span>
</h2>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table data-structure-type="row" data-row-type="HALF" data-row-id="8398b9c1-bf2f-4167-b377-f4f706b915fe" data-row-behavior="NORMAL" data-row-repeat-count="5" data-row-sort-products="Orders" data-row-selected-website="3aa4649c98704d1987869ad178988660"
width="600" cellpadding="0" cellspacing="0" class="newsletter-row non-responsive">
<tbody>
<tr>
<td class="row-td" background="" valign="top" bgcolor="#ffffff" style="background-repeat: no-repeat no-repeat;">
<table width="100%" class="inner-row-table" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="slot HALF" data-structure-type="slot" data-slot-type="HALF" width="300" cellpadding="0" cellspacing="0" align="left" valign="top" style="background-color: rgb(255, 255, 255); max-width: 300px; width: 300px; overflow: visible;">
<table class="component text-component" data-component-type="text" cellspacing="0" cellpadding="0" width="300" style="clear: both; background-color: rgb(255, 255, 255);">
<tbody>
<tr>
<td style="padding: 10px; word-wrap: break-word; word-break: break-word;">
<div class="text_container newsletter-main-content" style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; line-height: 1.3; font-size: 16px;">
<h2><span style="font-size:16px;"><span style="font-family:Courier,monospace;">Apointments Details</span></span>
</h2>
</div>
</td>
</tr>
</tbody>
</table>
<table class="component text-component" data-component-type="text" cellspacing="0" cellpadding="0" width="300" style="clear: both; background-color: rgb(255, 255, 255);">
<tbody>
<tr>
<td style="padding: 10px; word-wrap: break-word; word-break: break-word;">
<div class="text_container newsletter-main-content" style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; line-height: 1.3; font-size: 16px;">
<p style="margin: 0px;"><span style="font-size:14px;"><span style="font-family:Verdana,Geneva,sans-serif;">Date:{appointment_date}<br />
Time:</span></span>{appointment_time}</p>
<p style="margin: 0px;"><span style="font-size:14px;"><span style="font-family:Verdana,Geneva,sans-serif;">Address:</span></span>{client_address}<br />
<span style="font-size:14px;"><span style="font-family:Verdana,Geneva,sans-serif;">Phone:</span></span>{client_phone}</p>
<p style="margin: 0px;"> </p>
<p style="margin: 0px;"><span style="font-size:14px;"><span style="font-family:Verdana,Geneva,sans-serif;">Payment:</span></span>{payment_type}</p>
<p style="margin: 0px;"> </p>
<p style="margin: 0px;"><span style="font-size:14px;"><span style="font-family:Verdana,Geneva,sans-serif;">Additional Info:</span></span>{custom_fields}</p>
<p style="margin: 0px;"> </p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="slot HALF" data-structure-type="slot" data-slot-type="HALF" width="300" cellpadding="0" cellspacing="0" align="left" valign="top" style="background-color: rgb(255, 255, 255); max-width: 300px; width: 300px; overflow: visible;">
<table class="component text-component" data-component-type="text" cellspacing="0" cellpadding="0" width="300" style="clear: both; background-color: rgb(255, 255, 255);">
<tbody>
<tr>
<td style="padding: 10px; word-wrap: break-word; word-break: break-word;">
<div class="text_container newsletter-main-content" style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; line-height: 1.3; font-size: 16px;">
<p style="text-align: justify; margin: 0px;"><span style="font-size:14px;"><span style="font-family:Verdana,Geneva,sans-serif;">If You Want To Cancel your appointment (fees Apply) Click on the Cancel Button</span></span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<table data-component-type="button" class="component" cellspacing="0" cellpadding="0" width="300" align="center" border="0" style="width: 300px; vertical-align: top; background-color: transparent; clear: both;">
<tbody>
<tr class="newsletter-main-content">
<td align="center" style="padding: 0px; font-size: 0px;">
<table class="button-wrapper" cellspacing="0" align="center" border="0" cellpadding="12" style="line-height: normal; white-space: nowrap; vertical-align: baseline; text-align: center; border-collapse: separate; min-width: 10px; background-color: rgb(0, 0, 0); width: auto;">
<tbody>
<tr>
<td width="100%" align="center" style="padding: 12px;"><a class="newsletter-button-link" href="{cancel_appointment_confirm_url}" style="height: 100%; line-height: normal; display: inline-block; text-decoration: none; text-align: center; color: rgb(255, 255, 255); font-family: Impact, Charcoal, sans-serif; font-style: normal; font-size: 27px; font-weight: normal; width: auto;"
target="_blank"><span class="button" style="width: 100%; display: block; min-width: 10px;">Cancel</span></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
2 个答案:
答案 0 :(得分：0)
在.main-table, .newsletter-row, .newsletter-row .inner-row-table类
我刚刚在第23行中添加了display: block; & margin-bottom: 12px;。
您可以在此处查看代码：-https://codepen.io/GawiSh/pen/eKbbKQ
答案 1 :(得分：0)
您的问题尚不清楚，但是您可以尝试以下两种方法：
a）这是因为inline-block元素中的空白
删除您的HTML代码中的间距。
<div>one</div><div>two</div><div>three</div>
b）在您的CSS
div{
display:inline-block;
padding:0px;
margin-bottom:-5px;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？