Question

我使用普通的html在dompdf上有关于margin的问题。我已经将margin-top添加到div中，但在元素的末尾添加了一些额外的空间。

如果没有添加margin-top，它将完美运行。如下面的截图所示

当我向div添加margin-top时，它会在该div的末尾添加额外的间距，如下面的屏幕截图所示。 HTML是完美的，但仅在生成的pdf中出现问题。 HTML 1： PDF 1：

HTML 2： PDF 2：

我搜索了很多问题，但是找不到任何有关此问题的解决方案，当我使用margin-top:15px;时，为什么它会在元素之后添加空格我尝试了margin: 15px 0 0 0;但是也没有运气。

我使用的是最新版本的dompdf HTML Code snippest：

    *{margin:0; padding:0}
    body { padding: 50px 0; margin: 0px; font-family: Georgia; }
    ul{padding-left:40px; }
    .resume-container {width: 90%;margin:0 auto;background-color: #fff;}
    .reasume-header{width: 100%; border-bottom: 1px solid #DADADA}
    .reasume-header .head{font-weight: bold;font-size: 28px;}
    .small-font {font-size: 12px;}

    .header{margin-top:15px; margin-bottom:0;}
    h1{font-size: 20px; font-weight: bold; margin: 0px;}
    .content{margin-top: 15px}
				#template1 .header .title-header h1{background: #769AC2; color: #FFF; padding: 5px 0; text-align:center}

<html>
<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8"><title>Resume</title><style type="text/css">
</style>
</head>
<body>
    <div class="resume-container" id="template1">

        <div class="header w100 temp6-hidden" border="0" id="expertise_part" style="clear:both;">
            <div class="w100 align-top title-header">
                <h1>EXPERTISE</h1>
            </div>
            <div class="inner-content" style="clear:both;">
                <div class="content details" style="background: #F0F0F0">
                    <ul>
                        <li>Wide range of design experience building mobile sites to E-Commerce front end sites.</li>
                        <li>Expert in Joomla and WordPress Customization.</li>
                        <li>Highly proficient in Photoshop, Illustrator, HTML5 and XSLT.</li>
                        <li>Experienced with social media marketing and search engine optimization.</li>
                        <li>Highly skilled in layout designs for print in InDesign and custom logotypes.</li>
                    </ul>
                </div>
                <div class="content details">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac massa a felis molestie blandit sed a ex. Nullam rutrum mi et ultricies pellentesque. Proin ullamcorper, nunc eget mattis pellentesque, sem urna sagittis lacus, vitae scelerisque metus mauris eu magna. Integer commodo, ipsum ac ullamcorper aliquet, mauris massa imperdiet lorem, eget consectetur turpis quam sed neque. Nulla condimentum sem tortor, non imperdiet nunc fermentum nec. Donec lacus risus, dictum nec sem at, dapibus sagittis lectus. Duis tincidunt elit eu dui placerat pretium. Aliquam elementum urna ex, vel facilisis nunc dictum sit amet.Duis volutpat tincidunt laoreet. Nullam congue, metus vitae dapibus varius, ipsum turpis sollicitudin sapien, ut faucibus tellus erat id magna. Nunc consectetur dolor vel molestie lobortis. Proin volutpat commodo metus, non luctus turpis pulvinar et. Aliquam erat volutpat. Etiam consequat imperdiet ligula. Quisque finibus, nibh sit amet posuere maximus, diam dolor volutpat lacus, ut luctus enim dolor sed urna. Donec nec enim ut risus cursus tincidunt ut et libero.
                </div>
            </div>
        </div>
        <div class="header w100 temp6-hidden" border="0" id="education_part">
            <div class="w100 align-top title-header">
                <h1>EDUCATION</h1>
            </div>
            <div class="inner-content">
                <div class="w100 content " style="background: #F0F0F0">
                    <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="lft" style="width:60%">
                                <strong class="dt_area">ABC University</strong>
                            </td>
                            <td align="right" style="width:40%;"><strong class="dt_area">INDIA, Kerala</strong></td>
                        </tr>
                        <tr>
                            <td class="lft" style="width:60%"><strong class="dt_area">MCA</strong></td>
                            <td align="right" style="width:40%;"><strong class="dt_area"><strong class="dt_area">2/2001 - 3/2004</strong></strong></td>
                        </tr>
                    </table>
                </div>
                <div class="content details" style="width:100%;clear:both;font-size: 14px; font-family:Arial;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac massa a felis molestie blandit sed a ex. Nullam rutrum mi et ultricies pellentesque.<br />
                    Proin ullamcorper, nunc eget mattis pellentesque, sem urna sagittis lacus, vitae scelerisque metus mauris eu magna. Integer commodo, ipsum ac ullamcorper aliquet, mauris massa imperdiet lorem, eget consectetur turpis quam sed neque.<br />
                    Nulla condimentum sem tortor, non imperdiet nunc fermentum nec. Donec lacus risus, dictum nec sem at, dapibus sagittis lectus. Duis tincidunt elit eu dui placerat pretium. Aliquam elementum urna ex, vel facilisis nunc dictum sit amet.
                </div>
            </div>
        </div>
    </div>
</body>
</html>

div上

0 个答案: