Question

我在文本定位方面遇到了麻烦。我使用“h6”作为信息块的标题。我想从顶部和左侧制作一个10px的间隙，但我不能从顶部产生10px的差距，超过10px。左边很好。

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Sākums</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="log_me">
            <div class="log_inf">
                <div class="log_inf_titl"><h6>Uzmanību!</h6></div>
                <div class="log_inf_tex"><p>Lorem ipsum dolor sit <a href="#">amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
            </div>
        </div>
    </div>
</body>
</html>

CSS：

@font-face {
    font-family: OpenSans-Regular;
    src: url(font/OpenSans-Regular.ttf);
}

body {
    background: #f2f2f2;
}

.log_me {
    background: #fff;
    border: solid 1px #e4e4e4;
    height: 211px;
    width: 300px;
    position: absolute;
}

.log_inf {
    border: solid 1px #f2f2f2;
    background: #fff;
    height: 70px;
    width: 278px;
    position: absolute;
    top: 10px;
    left: 10px;
}

h6 {
    font-family: OpenSans-Regular;
    font-size: 11px;
    color: #707070;
    margin: 0;
    padding: 0;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: normal;
    display: block;
}

p {
    font-family: OpenSans-Regular;
    font-size: 11px;
    color: #707070;
    margin: 0;
    padding: 0;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: normal;
    display: block;
}

.log_inf_titl {
    position: absolute;
    top: 10px;
    left: 10px;
}

.log_inf_tex {
    position: absolute;
    top: 23px;
    left: 10px;
}

谢谢你，Ričards。

Answer 1

我建议您重新考虑一下您的设计，因为“差距”通常由padding和margin实现。

但是，解决您的具体问题，因为您更改了h6字体的默认大小，请同时调整line-height：

h6 {
    font-family: OpenSans-Regular;
    font-size: 11px;
    line-height: 11px;
    /* ... */
}

Answer 2

那么代码真的不是最佳实践，使用这么多position:absolue;是不好的。我建议您尝试修复代码并根据需要使用padding:10px。

但它也适用于您的代码，您需要将文本从顶部移动10px以上，并且还可以使用边框增加div的高度。

请参阅Fiddle

Answer 3

不确定为什么你有绝对定位，但是使用这个css。

@font-face {
font-family: OpenSans-Regular;
src: url(font/OpenSans-Regular.ttf);
}

body {
background: #f2f2f2;
}

.log_me {
background: #fff;
border: solid 1px #e4e4e4;
height: 211px;
width: 300px;
padding:10px;
}

.log_inf {
border: solid 1px #f2f2f2;
background: #fff;
height: 70px;
padding:10px;
}

h6 {
font-family: OpenSans-Regular;
font-size: 11px;
color: #707070;
margin: 0;
padding: 0;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: normal;
display: block;
}

p {
font-family: OpenSans-Regular;
font-size: 11px;
color: #707070;
margin: 0;
padding: 0;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: normal;
display: block;
}

带有“position：absolute”的文本位置

3 个答案: