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

Html – What do these numbers mean when hovering over the element during inspect element?

Hovering over the element during inspect element shows these numbers:
This is a basic HTML element block with two "div" elements nested inside. The first div is a p text. The second div contains radio buttons for the user to select

Repeat to meet text requirements:hovering over the element during inspect element shows these numbers:
This is a basic HTML element block with two "div" elements nested inside. The first div is a p text. The second div contains radio buttons for the user to select

Image shows a basic HTML element block with two "div" elements nested inside. The first div is a text. The second div contains radio buttons for the user to select.

Tags:

2

Answers


  1. 0

    I think it represents CSS Grid line numbers

    • Positive numbers start from left/top, so it starts at 1 and increases from left-to-right and top-to-bottom.
    • And Negative numbers is from right/bottom, it starts at -1 and decreases.

    So in your layout,

    • Student status shows (1) indicating it starts at the first grid column line
    • Date selection shows (2) indicating it starts at the second grid column line
    • Text div showing (1) to (-1) means it spans from the first grid line to the last grid line
    • Radio buttons showing (3) to (-1) means they start from the third grid line and extend to the end

    Thanks

    Login or Signup to reply.
  2. 0

    @Steven already correctly stated that those numbers are "grid Lines".
    Unfortunately, he is largely incorrect on a technical level after that.

    "Grid Lines" exist horizontally (grid-column) and vertically (grid-row). The start starts with a positive number and the end starts with a negative number.

    The important part here is, that start is not necessarily the top and left. Likewise the end does not have to be the bottom or right!

    The start is always depending on the flow direction, which depends on the flex-flow when using flexbox as well as the read direction. Japanese and Arabic has a direction: rtl which means that by default the start will be at the right side:

    .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
  direction: ltr;
  &.rtl {
    direction: rtl;
  }
}


.item {
  border: 2px dashed red;
  padding: 2em;
  &.start {
    grid-column: 1 / 2;
  }
  &.end {
    grid-column: -1 / -2;
  }
}
    <h2>Direction: Left-to-Right</h2>
<div class="container">
  <div class="item start">Start</div>
  <div class="item end">End</div>
</div>

<h2>Direction:Right-to-Left</h2>
<div class="container rtl">
  <div class="item start">Start</div>
  <div class="item end">End</div>
</div>

    Unlike Steven’s answer, you only have a 1-column and 2-row grid. Both Students and Date are not part of the Grid!

    The description chose your favorite web language is within the first row:

    description {
  grid-column-start: 1;
  grid-column-end: 2; 
  grid-row-start: 1;
  grid-column-end: 2;
}

    The <input type="radio"> must be along it’s labels within a container as the container and occupy the 2nd row.

    container {
  grid-column-start: 1;
  grid-colum-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}

    A good explanation of "Grid Lines" is this picture from CSS-Tricks:

    Grid lines from CSS-Tricks

    Overall it is well documented at MDN WebDocs.

    The code for the grid in question is similar to this:

    .container {
   display: grid;
}
    <div class="container">
  <h4>Choose your favorite Web Language</h4>
  <div class="selection">
    <input type="radio" name="language" id="html">
    <label for="html">HTML</label>
    <input type="radio" name="language" id="css">
    <label for="css">CSS</label>
    <input type="radio" name="language" id="js">
    <label for="js">JavaScript</label>
  </div>
</div>

    Which results in the following "Grid Lines":

    enter image description here

    As already said above, it is a 1-column and 2-row grid:

    grid-column: 1 = -2
grid-column: 2 = -1

grid-row: 1 = -3
grid-row: 2 = -2
grid-row: 3 = -1

    References:
    https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines
    https://css-tricks.com/snippets/css/complete-guide-grid/
    https://developer.mozilla.org/en-US/docs/Web/CSS/direction
    https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search