search

rtfeldman / elm-css

Typed CSS in Elm.
https://package.elm-lang.org/packages/rtfeldman/elm-css/latest
BSD 3-Clause "New" or "Revised" License
1.23k stars 196 forks source link

Extra gap when using (display: flex) and (justify-content: space-between) #560

Open Lepel1998 opened 2 years ago

Lepel1998 commented 2 years ago

Am I overseeing something, or do the span tags that are added by elm-css cause problems when using (justify-content : space-between). 

view =
    div [ css myStyle ]
        [ -- a span tag with css is inserted before here,
          -- creating a gap in the flex container
          -- when using (justify-content: space-between)
          -- because space is added between the span and
          -- the div with text
          div [] [ text "I have unwanted space on the left" ]
        , div [] [ text "Other element" ]
        ]

myStyle =
    [ displayFlex
    , width (pct 100)
    , justifyContent spaceBetween
    ]
schoettl commented 1 year ago

There is the CSS gap property but it's not yet supported in elm-css. Only a gap transition exists already.

Can I add it in a PR?

I think it's very important and handy when working with flexbox.

gap is described here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap

Arrow7000 commented 1 year ago

@schoettl that's not what this issue is about

schoettl commented 1 year ago

Sorry, didn't read carefully.