Question 203713 in Html Question posted in
Some basic documentation can be found here.

Html – I can't stop getting two pieces of text to go beneath another, instead I want them to be side by side

When using code like:

<h2>Text</h2>
<h2>More Text</2>

It ends up like:

Text
More Text

and for some reason it’s like there’s like an invisible barrier to the right of the two texts so I can’t place one next to the other (or even to the opposite side of the screen).

This is what I want it to look like:

Text                                                More Text
Tags:

2

Answers


  1. 0

    h2 is a header element.
    It’s supposed to look like that.

    Login or Signup to reply.
  2. 0

    In HTML, there are two types of elements: block and inline.

    The h2 element is a block element.

    According to w3schools

    A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
    A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
    An inline element does not start on a new line.
    An inline element only takes up as much width as necessary.

    for example :

    .border-red{
  border: 1px solid red;
}
    <span class="border-red" >Hello World (span element is an inline)</span>
<button class="border-red" >Hello World (button element is an inline)</button>

<h2 class="border-red" > Hello world (h2 element is a block) </h2>
<p class="border-red" > Hello world (p element is a block) </p>

    You can modify these behaviors using CSS.

    .border-red {
  border: 1px solid red;
}

.inline {
  display: inline
}

.block {
  display: block
}
    <span class="border-red block" >Hello World (span element is inline)</span>
<button class="border-red block" >Hello World (button element is inline)</button>

<h2 class="border-red inline" > Hello world (h2 element is a block) </h2>
<p class="border-red inline" > Hello world (p element is a block) </p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search