Text and Input heights not right

Question

I am currenty making a new look and system for my website, However, I am stuck with the line/text height problem. I have tried using line-height, But no luck, As it started to overlap on to the div and other text, And didn't seem normal.

Current CSS [#Content is the main container I'm talking about ]

body {
                background:#000 url(/Media/Background.png) top center;
            }
            #Wrap { 
                width:100%; 
                height:100%; 
            }
            #Header { 
                position:absolute; 
                width:100%;
                height:100px; 
                left:0px; 
                top:0px; 
                background-color:#000; 
                color:#FFF;
                text-align:center;

            }
            #Logo {
                background:url(/Media/TeknikkInfo.png) left no-repeat;
                position:absolute;
                height:100px;
                width:452px;
                left:10px;
                cursor:pointer;
            }
            #Navigation { 
                position:absolute; 
                width:100%;
                height:50px; 
                left:0px; 
                top:100px; 
                background:#1f1f1f;
                line-height:10px;
                text-align:center;

            }
            #Content { 
                border:1px solid #000;
                background:url(https://8b300d69518d5a96e5de-3852609c222273912115f7d2fbf93e19.ssl.cf1.rackcdn.com/BackgroundTeknikk.png);
                position:relative; 
                margin:0px auto 0px auto;
                width:900px;
                top:152px; 
                background-color:#000; 
                text-align:center;
                color:#FFF;
                line-height:0px;

                font-size:20px;

                text-shadow:
                -1px -1px 0 #000,
                1px -1px 0 #000,
                -1px 1px 0 #000,
                1px 1px 0 #000;  

            }
            .Button {
                min-width:100px;
                height:40px;
                position:relative;
                top:5px;
                line-height:40px;
                margin:0px auto 0px auto;
                text-align:center;
                background:url(https://8b300d69518d5a96e5de-3852609c222273912115f7d2fbf93e19.ssl.cf1.rackcdn.com/Button.png);
                cursor:pointer;
                display:inline-block;
                border:1px solid #000;
            }
            #Title {
                width:400px;
                height:27px; 
                margin:-22px auto 0px auto;
                -moz-border-radius: 15px;
                border-radius: 15px;
                background:#FFF;
                color:#000;
                top:0px;
                text-align:center;

            }
            #Seal { 
                position:absolute; 
                top:150px;
                width:132px;
                height:70px; 
                left:0px;  
                background:#1f1f1f              top;

                text-align:left;
            }
            #Seal > span { display:inline-block;}

How it looks like with line-height:0px;

It has been a problem as having text and links causes issues. And it also applies to input fields like this.

When i remove the line-height, It will look something like this. And when i turn display_errors on for PHP, it looks normal. So, What Is the problem, I wanted it to be normal, And not like a 1000px long website of the spaces when

I have been stuck with this before too, but Didn't care about it, as it was for some Small sites. So, How can I make the height be right, Without having it overlap with text so hyperlinks is half clickable? https://teknikk.info/teknikk.info/ Is the dev so If you need to look at all the code.

Answer 1

The <h1> and <p> elements on the page https://teknikk.info/teknikk.info/ have a default margin on them that you are not adjusting. Browsers have a “user agent stylesheet” that contains CSS that the browser applies when there is no other styling information for that property.

In Chrome, this is about .67em for the <h1>, and 1em for the <p>.

You could remove this margin with the following CSS:

h1, p {margin: 0;}

However, this would likely make your text quite unreadable.

You would be better to typeset your document. Here is a good article on setting margins for readability on the web: http://24ways.org/2006/compose-to-a-vertical-rhythm/