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

How do I make the bullet point in this box go up? – Html

I have my code written on putting a bullet point "•" in a box. How do I make this bullet point go up in the box. I tried "vertical-align:top;" but doesn’t work.

.stick1 {
  position: absolute;
  border: 8px solid #81a1b1;
  border-radius: 4px;
  background-color: #81a1b1;
  height: 25px;
  margin-left: 130px;
  margin-top: 17px;
  color: rgb(0, 0, 0);
}
<div class="stick1">•</div>
Tags:

2

Answers


  1. 0 
    line-height: 0;

    Will do the trick.

    The line-height CSS property can be used to vertically align child elements within a parent element because it determines the height of the line box that encloses the inline content. This means that any inline-level child elements will be vertically aligned within the line box according to the value of the line-height property.

    To vertically align child elements using line-height, you can set the line-height property of the parent element to a value that is equal to the height of the parent element. This will cause the child elements to be vertically centered within the parent element.

    The line-height CSS property controls the height of a line box within a block-level element. It sets the minimum height of the inline content inside the line box, which includes the text and any other inline-level elements.

    The line-height property can be specified using a number of different units, including pixels, ems, rems, and percentages. When using a unitless value, the line-height property is set as a multiple of the font size of the element.

    For example, if the line-height property is set to 1.5, it means that the line box will be 1.5 times the height of the font size. If the font size is 16 pixels, the line box will be 24 pixels tall.

    When the line-height value is greater than the font size, the line box will be taller than the font size. This can create extra space between lines of text, which can improve readability. However, if the line-height value is too high, it can create too much space between lines and make the text harder to read.

    The line-height property can also be set using the normal value, which sets the line height to a default value based on the user agent’s settings. In this case, the line height is typically set to 1.2 times the font size.

    Login or Signup to reply.
  2. 0

    Setting the line-height to zero may be what you’re after:

    .stick1 {
  position: absolute;
  border: 8px solid #81a1b1;
  border-radius: 4px;
  background-color: #81a1b1;
  height: 25px;
  margin-left: 130px;
  margin-top: 17px;
  color: rgb(0, 0, 0);
  line-height: 0;
}
    <div class="stick1">&#x2022;</div>

    Every font occupies a certain minimum height, regardless of the character, for example a comma and the number 3 will both have the same minimum preferred height. The line-height‘s default of normal (roughly 1.2), is used in calculating its "layout bounds" and dropping it to zero will reduce the height as much as possible.

    See also: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

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

Back To Top
Search