Question

我目前正在为我的网站制作新的外观和系统，但是，我遇到了线/文字高度问题。我尝试过使用行高，但没有运气，因为它开始重叠到div和其他文本上，并且看起来并不正常。

当前的CSS [#Content是我正在谈论的主要容器]

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;}

line-height的外观如何：0px;

由于文本和链接导致问题，这是一个问题。它也适用于这样的输入字段。 enter image description here

当我删除行高时，它看起来像这样。 enter image description here 当我打开PHP的display_errors时，看起来很正常。那么，问题是什么，我希望它是正常的，而不是像一个1000px长的空间网站

我之前也一直坚持这个，但是不关心它，就像一些小型网站一样。那么，我怎样才能使高度正确，不与文本重叠，以便超链接可以半点击？ https://teknikk.info/teknikk.info/是开发人员如果您需要查看所有代码。

Answer 1

页面https://teknikk.info/teknikk.info/上的<h1>和<p>元素具有您未调整的默认边距。浏览器有一个“用户代理样式表”，其中包含浏览器在没有该属性的其他样式信息时应用的CSS。

在Chrome中，<h1>约为0.67em，<p>为1em。

您可以使用以下CSS删除此边距：

h1, p {margin: 0;}

但是，这可能会使您的文字难以理解。

您最好排版文档。以下是关于在网络上设置可读性边距的好文章：http://24ways.org/2006/compose-to-a-vertical-rhythm/

文字和输入高度不对

1 个答案: