Bem, testei de várias formas, mudando o elemento span
pelo h6
, pelo strong
, e outros, e nada! Não teve jeito, até agora, de formatar o width
e height
de um elemento dentro da tag <p>
. Será que o CSS não aceita, é isso? Ou o que falta?. Segue o código:
PS: percebam que o meu intento é deixar o número "1" em um círculo/caixa com 30x30px, só isso.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Lobster+Two&display=swap" rel="stylesheet">
<style>
p {
font-family: 'Lobster Two', cursive; font-size:18pt;
}
.x {
width:30px; height:30px; border:1px solid black; line-height:30px; border-radius:50%;
}
</style>
</head>
<body>
<div>
<p><span class="x">1</span>A raposa lançou-se esbaforida sobre o pássaro.</p>
</div>
</body>
</html>
display:inline-block;text-align:center;
no.x
ou mesmodisplay:block
, mudará o comportamento do elemento. Oinline-block
é mais interessante nesse caso.