1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 17:37:37 +00:00

LibWeb: Use flex layout for button content alignment

Using flex layout inside button solves the issue with wrongly calculated
height when it has: pseudo element and whitespaces inside.

Also using flex instead of a table layout allows for the same vertical
alignment but with fewer layout nodes: a flex container and anonymous
wrapper for content instead of a table wrapper, table, row, and cell.
This commit is contained in:
Aliaksandr Kalenik 2023-09-03 11:07:38 +02:00 committed by Andreas Kling
parent 3216cc34a6
commit ed0dc2ff72
11 changed files with 145 additions and 147 deletions

View file

@ -0,0 +1,16 @@
<!doctype html><style>
button {
position: relative;
padding: 20px;
background: initial;
}
button:after {
content: "";
position: absolute;
left: 0;
top: 0;
background: green;
width: 100%;
height: 100%;
}
</style><body><button></button>