Member Avatar for ekka

Hi guys, I'm here again with my psd to html / css template.
now i have a strange issue is simple to explain but difficult to deal with.
i have tow tags (.iconSearch and search classes ) in one form, and i want to float them at right but when i do that, i get an extra margin in top despite i set 0 on margin-top, this the code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body , html{
            height : 100%;
            width : 100%;
            margin: 0;
            padding :0;
        }
        body
        {
            height : 100%;
            width : 100%;
            background-color : #d0d0d0;
            padding : 0 20px;
            box-sizing : border-box;
        }

        * , *::before , *::after
        {
            box-sizing : inherit;
        }
        .container
        {
            background-color : #ffffff;
            border-top : 10px solid #894aa3;
            /*border-bottom : 55px solid #444444;*/
            height : 100%;
            width : 100%;
            margin: 0;
            display : table;
            /*padding : 0 30px;*/
            position : relative;
        }

        .iconSearch
        {
            background-color : #ebebea;
            background-image : url("../img/searchIcon.png");
            background-repeat: no-repeat;
            background-size : 15px 15px;
            background-position: center;
            width : 28px;
            height : 28px;
            border-radius: 0 0 7px 0;
            margin : 0 30px auto auto;
            float : right;
            border : 0;

        }

        .search
        {
            margin: 0;
            float : right;
            width : 188px;
            height: 28px;
            border : 0px;
            background-color: #ebebea;
            border-radius: 0 0 0 7px;
        }

    </style>
</head>
<body>
<form>
    <div class="container">
        <header>
            <form>
                <input class="iconSearch" type="submit" value=""/><input class="search" type="text"/>
            </form>
            <h2 class="utopic-flowers">
                <span>u</span>topic <span>f</span>lowers
            </h2>
            <span class="utopic-flowers2">free PSD webSite template</span>
            <ul class="navbartop">
                <li><a href="#">home</a></li>
                <li><a href="#">style demo</a></li>
                <li><a href="#">full width</a></li>
                <li><a href="#">dropdown</a></li>
                <li><a href="#">portfolio</a></li>
                <li><a href="#">gallery</a></li>
            </ul>
            <div class="headerText">
                <p>Veniam ipsum laboris adipisicing anim aliquip occaecat qui amet exercitation dolor culpa. Voluptate
                    excepteur pariatur adipisicing cupidatat exercitation occaecat do consequat culpa ea duis proident.</p>
            </div>
        </header>
    </div>
</form>
</body>
</html>

thank you in advance.

Edited by ekka
  • 3 Contributors
  • 2 Replies
  • 450 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by multail

Dani AI

Generated

Short answer: was right — the visible gap comes from the heading's default vertical margin. Browsers give headings built-in top/bottom margins, which can make floated inputs look offset even when those inputs have margin-top: 0.

A straightforward fix is to reset the heading margin and avoid using auto for vertical margins on the floated controls. Example fixes (added to the page CSS):

/* remove heading space that pushes layout down */
header h2 { margin: 0; }

/* make inputs behave predictably when floated or inline */
.iconSearch, .search {
  display: inline-block;
  vertical-align: middle;
  margin-top: 0; /* explicit zero is clearer than 'auto' */
}

If a more robust layout is preferred, replace the float approach with a small flexbox wrapper for the header so the search controls and the title align cleanly:

header { display: flex; align-items: center; justify-content: space-between; }
.header-right { display: flex; gap: 6px; align-items: center; } 
/* move the two search inputs into .header-right and align to the right */

Additional notes drawn from the original markup: nested <form> tags are invalid HTML and can produce unpredictable rendering—remove the inner form. Also, display: table and height: 100% on the container can change how vertical spacing behaves; switching to block/flex or removing that display rule often reduces surprises. For debugging, inspect the computed box model in browser devtools to see which element’s margin or line-height is creating the gap.

Credit to for spotting the heading margin; addressing that plus the small layout cleanups above will eliminate the "extra" top space.

Recommended Answers

All 2 Replies

Member Avatar for AndrisP

It's a margin of 

            <h2 class="utopic-flowers">
                <span>u</span>topic <span>f</span>lowers
            </h2>

try to replace e.g.

            <b class="utopic-flowers">
                <span>u</span>topic <span>f</span>lowers
            </b>

and you will see that the extra margin of input element disappears

Member Avatar for multail

nice posting

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.