Question

我是CSS的新手。

有没有办法在以下范围中移动文字，如非重复的背景图片？

例如：左起50px，左起40px？没有造成额外的高度和宽度！

div{
width: 300px;
height: 300px;
border: 1px solid black;
}

<body>
<div>
<span>Hello World</span>
</div>
</body>

我可以提出更多问题吗？ 16px角色占用多少空间？我的意思是16px是什么意思？ 16像素宽？ 16像素高？当我们用鼠标选择一个字符时，所选字符周围有一个蓝色框，大于该字符。这与这个问题有关吗？

Answer 1

首先，我认为font-size总是与字母的高度以及＆＃34;蓝框＆＃34;的原因有关。略大，因为它突出显示line-height指定的行。

要将文字放在盒子里，你有几个选择：

1）您绝对可以将span置于div内，如此：

div {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    position: relative;
}
span {
    position: absolute;
    top: 50px;
    left: 50px;
}

http://jsfiddle.net/5xukp/

2）您可以将span＆＃39; display设置为block或inline-block，然后应用margin或padding如此定位span：

span {
    display: inline-block;
    margin-top: 50px;
    margin-left: 50px;
}

http://jsfiddle.net/m79as/

编辑 - 在回复您的评论时，没有background-position这样的属性，您可以将其设置为center center或center left但是您可以使用vertical-align和text-align定位文字。要正确垂直对齐span，您需要将display设置为table-cell

div {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    display: table-cell;
    text-align: center; /* left|right|center|justify */
    vertical-align: middle; /* top|text-top|middle|bottom|text-bottom */
}

http://jsfiddle.net/6ExB2/

在其父级内自由移动文本

1 个答案: