Question

我希望稍微移动元素h1但不移动整个div块。

HTML代码在这里：

<div class="mainblock"></div>
<div class="under"><h1>Some text</h1></div>

CSS规则在这里：

.mainblock {
    margin: 40px auto 0 auto;
    width: 40%;
    height: 250px;
    background-color: cadetblue;
}

.under {
    margin: 0 auto;
    width: 40%;
    height: 250px;
    background-color: coral;
}
h1 {
    text-align: center;
    font: 40px/30px Tahoma,sans-serif; 
    font-weight: 900;
    color: azure;
/*    Here I add some margin for H1   */
    margin-top: 20px;
}

如何仅移动h1标签？使用padding不合适，因为它会增加一些空间，如果是链接，则会创建一些我不需要的可点击空间。

Answer 1

为父元素和子元素提供position：absolute 试试这个：http://jsfiddle.net/heuek2za/

.mainblock {
    margin: 40px auto 0 auto;
    width: 40%;
    height: 250px;
    background-color: cadetblue;
    margin-left:28%;

}

.under {
    margin: 0 auto;
    position:absolute;
    width: 40%;
    height: 250px;
    background-color: coral;
    margin-left:27%;
    margin-top:4%;
}
h1 {
    text-align: center;
    position:absolute;
    font: 40px/30px Tahoma,sans-serif; 
    font-weight: 900;
    color: azure;
/*    Here I add some margin for H1   */
    margin-top: 50%;
}

Answer 2

您可以通过添加line-height

来移动它

Answer 3

实现你想要的另一种可能性是使用这样的定位：

.under {
margin: 0 auto;
width: 40%;
height: 250px;
background-color: coral;
position:relative;
}

h1 {
text-align: center;
font: 40px/30px Tahoma,sans-serif; 
font-weight: 900;
color: azure;
position:absolute;
top: 20px;
}

Answer 4

如果链接位于padding-top标记内，h1看起来像你想做的那样。

HTML

<div class="mainblock"></div>
<div class="under"><h1><a href="#">Some text</a></h1></div>

CSS

.mainblock {
    margin: 40px auto 0 auto;
    width: 40%;
    height: 250px;
    background-color: cadetblue;
}

.under {
    margin: 0 auto;
    width: 40%;
    height: 250px;
    background-color: coral;
}
h1 {
    text-align: center;
    font: 40px/30px Tahoma,sans-serif; 
    font-weight: 900;
    color: azure;

    /* replace margin-top with padding-top */
    padding-top: 20px;
}

这是一个小提琴......我将填充从20px更改为60px，以便更容易看到文本上方没有可点击的空格。

http://jsfiddle.net/htpb9bdk/

Answer 5

在h1元素上使用position:relative移动它而不会影响任何其他元素的位置。

h1 {
    position:relative;
    top:20px;
    text-align: center;
    font: 40px/30px Tahoma,sans-serif; 
    font-weight: 900;
    color: azure;
    /*    Here I add some margin for H1   */
    margin-top: 20px;
}

Answer 6

您还可以将float：left; width 100％应用于H1，这样可以使您的保证金有效。 h1的新CSS变为：

    h1 {
         color: azure;
         float: left;
         font: 900 40px/30px Tahoma,sans-serif;
         margin-top: 20px;
         position: relative;
         text-align: center;
         width: 100%;
       }

移动元素CSS的问题

6 个答案: