Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Extra margins when using inline-block and margin-top #1946

Open
PowerKiKi opened this issue Jun 10, 2019 · 5 comments · May be fixed by #2762
Open

Extra margins when using inline-block and margin-top #1946

PowerKiKi opened this issue Jun 10, 2019 · 5 comments · May be fixed by #2762
Labels
bug layout
Milestone
3.1.0

Comments

@PowerKiKi
Copy link
Contributor

PowerKiKi commented Jun 10, 2019 •
edited by bsweeney

The combination of display: inline-block; and margin-top will mess up the margin of the containing element and each contained element after the first one. That makes it very difficult to have a proper alignment and margin.

In my real use-case there is no container, so I cannot apply a padding on the container to workaround this issue. Also vertical-align: top; on any elements does not allow to workaround the issue either.

Reproducible example

See the code below:

<?php

use Dompdf\Dompdf;

require_once '../vendor/autoload.php';

$html = <<<STRING
<!doctype html>
<html lang="en">
    <head>
        <title>My title</title>
        <style>
            .container {
                background: pink;
            }
            
            .foo {
                background: gold;
                width: 30%;
            }
            
            .bar {
                background: lightgreen;
                width: 70%;
            }
            
            .foo, .bar {
                display: inline-block;
                height: 50px;
                margin-top: 200px;
            }
        </style>
    </head>
    <body>
        <p>lorem lipsum</p>
        <div class="container">
            <div class="foo">foo foo foo</div><div class="bar">bar bar bar</div>
        </div>
    </body>
</html>
STRING;

$dompdf = new Dompdf();
$dompdf->loadHtml($html);
$dompdf->setPaper('A4');
$dompdf->render();

// Comment out to see HTML
$dompdf->stream('test.pdf', ['Attachment' => false]);

echo $html;

Expected

HTML as rendered by Chrome:

image

Actual

PDF as rendered by dompdf/dompdf v0.8.3 will show extra margins in different places:

image

Versions

  • dompdf/dompdf v0.8.3, also failing on develop branch 5c20bb4
  • PHP 7.2.19, also failing on PHP 7.3 according to eclecticgeek.com/dompdf
@PowerKiKi
Copy link
Contributor Author

PowerKiKi commented Jun 10, 2019 •
edited by bsweeney

Re-reading the following issues I realize they are duplicates, or related:

image

image

Which issues should be closed as duplicates and which should be kept ?

@bsweeney bsweeney added this to the 0.8.4 milestone Jun 22, 2019
@bsweeney
Copy link
Member

Thank you for the analysis. Seems like this might be related to margin collapse not applying to elements correctly. Dompdf right now just looks at immediately siblings and children without regard for display type.

@bsweeney
Copy link
Member

FYI I'll keep this issue open since the others have long passed their due date and you've taken the time to research things.

@bsweeney
Copy link
Member

I actually think #500 is a different issue relating to how inline-block elements are flowed to the next line. At any rate, that issue was migrated and there's a recent duplicate so I'll leave it closed.

@bsweeney bsweeney modified the milestones: 0.8.4, dompdf-next Jan 2, 2020
Mellthas added a commit that referenced this issue Sep 26, 2021
@Mellthas
Prevent margin collapsing with inline-level or out-of-flow elements
e959a70 
Partially addresses #1946
@Mellthas Mellthas mentioned this issue Sep 26, 2021
Merged
@Mellthas
Copy link
Member

#2576 addresses the margins being collapsed with the inline-block children, which resulted in the huge gaps. The remaining issue is the vertical alignment being off for inline-block elements.

Mellthas added a commit that referenced this issue Sep 29, 2021
@Mellthas
Prevent margin collapsing with inline-level or out-of-flow elements
7c7c73b 
Partially addresses #1946
Mellthas added a commit that referenced this issue Oct 2, 2021
@Mellthas
Prevent margin collapsing with inline-level or out-of-flow elements
d9967a1 
Partially addresses #1946
Mellthas added a commit that referenced this issue Oct 6, 2021
@Mellthas
Prevent margin collapsing with inline-level or out-of-flow elements
fe61a85 
Partially addresses #1946
Mellthas added a commit that referenced this issue Nov 28, 2021
@Mellthas
Use margin height instead of border height in vertical alignment
68a2994 
As the margin height is what affects the line-box height. Prevents
inline-block frames being pushed out of their line box due to large
margins.

Partially addresses #1946
Mellthas added a commit that referenced this issue Dec 1, 2021
@Mellthas
Use margin height instead of border height in vertical alignment
c8971f8 
As the margin height is what affects the line-box height. Prevents
inline-block frames being pushed out of their line box due to large
margins.

Partially addresses #1946
Mellthas added a commit that referenced this issue Dec 1, 2021
@Mellthas
Use margin height instead of border height in vertical alignment
9f5690f 
As the margin height is what affects the line-box height. Prevents
inline-block frames being pushed out of their line box due to large
margins.

Partially addresses #1946
Mellthas added a commit that referenced this issue Dec 1, 2021
@Mellthas
Use margin height instead of border height in vertical alignment
96a9345 
As the margin height is what affects the line-box height. Prevents
inline-block frames being pushed out of their line box due to large
margins.

Partially addresses #1946
Mellthas added a commit that referenced this issue Jan 21, 2022
@Mellthas
Revert "Use margin height instead of border height in vertical alignm…
a8a4ff4 
…ent"

This reverts commit 96a9345. It seems
this was not an innocent fix as it seemed to be. Retain the existing
behavior, which unfortunately undoes the small improvement to #1946.

Fixes #2756
@Mellthas Mellthas mentioned this issue Jan 21, 2022
Closed
@bsweeney bsweeney linked a pull request Jan 26, 2022 that will close this issue
Improve vertical alignment and related adjustments #2762
Open
@bsweeney bsweeney modified the milestones: dompdf-next, 1.2.0 Jan 26, 2022
@bsweeney bsweeney modified the milestones: 1.2.0, 1.2.1 Feb 5, 2022
markkimsal pushed a commit to markkimsal/dompdf that referenced this issue Feb 17, 2022
@Mellthas @markkimsal
Use margin height instead of border height in vertical alignment
50ae8c6 
As the margin height is what affects the line-box height. Prevents
inline-block frames being pushed out of their line box due to large
margins.

Partially addresses dompdf#1946
@bsweeney bsweeney modified the milestones: 1.2.1, 2.0.1 Mar 16, 2022
@bsweeney bsweeney removed this from the 2.0.1 milestone Aug 25, 2022
@bsweeney bsweeney added this to the 2.0.2 milestone Aug 25, 2022
@bsweeney bsweeney modified the milestones: 2.0.2, 2.0.3 Dec 29, 2022
@bsweeney bsweeney modified the milestones: 3.0.1, 3.1.0 May 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug layout
Projects
None yet
Milestone
3.1.0
Development

Successfully merging a pull request may close this issue.

Improve vertical alignment and related adjustments dompdf/dompdf
3 participants
@PowerKiKi @bsweeney @Mellthas