How to remove flexbox default padding/margin/pagemargin?


Tags: javascript,html,css,flexbox

Problem :

I'm currently starting up my senior thesis website (starting from scratch). I'm using flexbox as a structure of the html however I was wondering how to remove the default margin or page of the flexbox?

HTML Body

<header>
    <section>
        <!--Start of Logo-->
        <div class="logo_section">People Tracking System</div>
        <!--End of Logo-->

        <!--Start of Time-->
        <div class="time_section">
            <br><br>
            <div id = "time" ></div>
            UCT+8
        </div>
        <!--End of Time-->

        <!--Start of Login Form-->
        <div class="login_section">
            <form action="login.php" class = "container" method="POST">
                <div class="container">     
                    <label>login: </label> &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input id = "inputform" type="text" placeholder="Enter Username" name="uname" required>
                    <br>
                    <label style="text-align:right">password: </label>&nbsp;
                    <input id = "inputform" type="password" placeholder="Enter Password" name="psw" required>
                    <br>
                    <input type="checkbox" checked="checked"> Remember me
                    <button type="submit" id ="submit">Login</button>
                </div>
            </form>
        </div>
        <!--end of login form-->
    </section>
</header>

CSS Code

section {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;

    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin:0;
}

/*Logo Section*/
.logo_section {
    flex: 1 1 10%;
    order: 1;
}

/*time*/
.time_section {
    background: #143c70;
    flex: 3 1 60%;
    order: 2;
    text-align:right;
    color: white;
}

/*login form*/
.login_section {
    background-color: #7098cc;
    clear: none;
    flex: 1 6 15%;
    order: 3;
}

https://jsfiddle.net/laklaker/qyghLof4/

I hope you can help me regarding this problem. Thanks!



Solution :

I think this might be happening in the jsfiddle. If it is still happening in your page you can have:

body {
    margin: 0;
}

    CSS Howto..

    Chrome and Firefox handle zoom differently. How to deal with this in my CSS

    How to make a menu have submenus in pure CSS

    How can I make the ul list the same size as the input element in terms of width?

    IE11 dosen't show CSS-Content properly

    Show specific comment in LESS file when compiled to CSS while keeping all other comments hidden

    How to Vertically Center Images on a Line?

    How to HTML/CSS Limit / Clip / Mask an object?

    How to make a div and its children to ignore its parent styles?

    CSS: How do I stop hover effects from pushing my text?

    How do I do image color blend in css?

    CSS3 Challenge - How to get this gradient background pattern without using all the divs?

    How to blur background img - css?

    How to use calc in CSS for mozilla firefox without position absolute

    How to hide this element using CSS or JQuery

    How to fix this flexbox alignment issue due to unsupported 'flex-grow' in IE10?

    How to remove/reset/not inherit the CSS properties of a DIV/element/… within the same CSS document?

    How to apply CSS string using Javascript/jQuery without parsing/tokenizing to retrieve property-value pairs?

    How to write inline CSS to web2py view

    How do I differentiate between IE versions 6 to 10 using IE CSS Hacks?

    How to create a button with overlapping Ribbon Shape in CSS?

    How to make CSS image transition smooth?

    How to get image info from css into MasterPage'gridview?

    How can I center a tooltip below an element that is narrower than the tooltip?

    How can I remove a bootstrap buttons hover effect?

    Click radio button then show submit button

    Boostrap: How to “stick” a button over an image when re-sizing

    How to put css and javascript in a common library/ project

    How to correctly affect multiple css properties in jquery

    php- How to strip CSS in the text

    how to override font-color dynamically with css color property