search

gss / engine

GSS engine
http://gss.github.io
MIT License
2.87k stars 103 forks source link

VFL and border - extra 1px in viewport #200

Closed andering closed 8 years ago

andering commented 8 years ago

Hello, this is simple example of navigation bar, but i can't figure out why i'm getting extra 1px in (nav)[width], it has connection with border: 1px which is set in css to each (nav a) element. Codepen: http://codepen.io/andering/pen/dYMBVm , you can see the horizontal bar at the bottom, shouldn't be there.

    nav {
        width: == ::window[width];
        height: == 50;

        a  {
            width: <= ^[width]/5;
            height: == ^[height];

            span { 
                center: == ^[center];           
                size: == &[intrinsic-size];
            }
        }

        @h |-(& a)-...-| in(&) gap(0);
    }

Thank you for kick. Just started journey with GSS.

obenjiro commented 8 years ago

This 1 pixel is an artefact of "CSS Box model" ( you using border 1px ) and unfortunately GSS dose not account for that problem.

Add this to your CSS 

*, *:before, *:after {
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

And everything would be just fine :)