Why can't span tag take class attribute?-CodePudding

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
    .right {
      text-align: right;
    }
    </style>
  </head>
  <body>

    <span class="right">test</span>
  </body>
</html>

I want 'test' to be displayed at right, but it didn't work. If I change span to div, it works. Why is that? I want span, but not div. In the following example, I want 'name' to be displayed at the right of the page, but at the same line as 'age'. But the 'span' tag doesn't do the job.

<span>age</span>  <span class="right">name</span>

CodePudding user response：

The <span> element is an inline container and it occupies the space based on content. Where as <div> is a block element and it occupies the container fully. So if you want it to work with span you can set the display: block:

<!DOCTYPE html>
    <html>
      <head>
        <title>Title of the document</title>
        <style>
        .right {
          text-align: right;
          display: block;
        }
        </style>
      </head>
      <body>

        <span class="right">test</span>
      </body>
    </html>

or You can use float instead of text-align with span

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
    .right {
      float: right;
    }
    </style>
  </head>
  <body>

    <span class="right">test</span>
  </body>
</html>

Same for the second example:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Title of the document</title>
        <style>
        .right {
          float: right;
        }
        </style>
      </head>
      <body>

        <span>age</span>  <span class="right">name</span>
      </body>
    </html>

CodePudding user response：

span is an inline element. Its width is that of its content. So while the content of the span is being aligned to the right, it's unnoticeable.

divs, on the other hand, are block elements, and will span the width of the container.

if you want to align the span to the right, you should to wrap it in a div and apply text-align:right to it:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
    .right {
      text-align: right;
      width:100%;
    }
    </style>
  </head>
  <body>

    <div class="right"><span>test</span></div>
  </body>
</html>

CodePudding user response：

The reason is because a <div> has a default display property of block, but <span> has a default display property of inline.

Change your .right class to include display: block; and it will work for both.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
    .right {
      display: block;
      text-align: right;
    }
    </style>
  </head>
  <body>

    <span class="right">test</span>
  </body>
</html>

<span> documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span