Why does width and height not work in this case?

Asked

Viewed 398 times

1

Well, I’ve tested it in various ways, changing the element spanfor h6, for strong, and others, and nothing! There was no way, until now, to format the widthand height of an element within the tag <p>. Does CSS not accept, is that it? Or what is missing?. Follow the code: PS: realize that my intention is to leave the number "1" in a circle/box with 30x30px, that’s all.

<!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>

css

  • You are trying to put width on an inline element. if you put a display:inline-block;text-align:center; in the .x or even display:block, will change the behavior of the widget. O inline-block is more interesting in this case.

2 answers

2


You are trying to put width on an inline element.

According to the documentation, the property width is valid for all elements except for inline content not replaced, which happens to be exactly the semantics of span.

For the desired purpose, you need to change the behavior of span so that it works as a block, using the property display.

Can use block or better yet inline-block in this case, allowing the element to track the text flow.

See applied to your code:

<!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 {
        display:inline-block;text-align:center; /* só acrescentamos esta linha */
        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>

Note that we take advantage and use a text-align:center to leave the number in the middle of the circle.

Learn more at MDN:

https://developer.mozilla.org/en-US/docs/Web/CSS/width

https://developer.mozilla.org/en-US/docs/Web/CSS/display

0

<div class="x">
<p><span>1</span>A raposa lançou-se esbaforida sobre o pássaro.</p>
</div>

Try it with this

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.