我是CSS的新手。
有没有办法在以下范围中移动文字,如非重复的背景图片?
例如:左起50px,左起40px?没有造成额外的高度和宽度!
div{
width: 300px;
height: 300px;
border: 1px solid black;
}
<body>
<div>
<span>Hello World</span>
</div>
</body>
我可以提出更多问题吗? 16px角色占用多少空间?我的意思是16px是什么意思? 16像素宽? 16像素高?当我们用鼠标选择一个字符时,所选字符周围有一个蓝色框,大于该字符。这与这个问题有关吗?
答案 0 :(得分: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;
}
2)您可以将span
&#39; display
设置为block
或inline-block
,然后应用margin
或padding
如此定位span
:
span {
display: inline-block;
margin-top: 50px;
margin-left: 50px;
}
编辑 - 在回复您的评论时,没有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 */
}