What are the other values of display property of link in CSS?

Answer 1

The display property has quite a few different options, depending on the context of what you are trying to do. This property is available for all different elements, including links (or <a> tags) as you mentioned in your question.

There are a bit too many options for display to list then all here, but here are a few of the most common ones:

1. block: This is the default for most elements. It displays on a new line, and takes up the whole width of that line. For example, a paragraph (<p>) tag.
2. inline: the element will display as an "inline" element, which means it will act like a <span> tag. Specifically, this means it will be displayed on the same line as other elements. Width and Height properties also have no effect when an element is displayed as an "inline element"
3. flex: The element is displayed as a block (IE like the block option) container, but uses the "flex" positioning/display system. Flex is a bit outside the scope of this question, so I won't go into deep detail here, but basically flex allows you to position/organize elements inside the container.
4. inline-block: This is a combination of the block and inline options. Specifically, this means the element is displayed like an inline element, but the width and height properties have an effect (unlike regular inline)
5. none: Elements with the none option are completely removed, and act as if they don't exist. This is very useful in combination with javascript. For example, you can use javascript to "toggle" an element by changing its display property from whatever it starts as to none, or vice versa. This is one way, for example, websites use to implement modal windows (popup windows). The modal window starts with display set to none, and then javascript makes the display one of the other options (usually block) to make it visible when you trigger an action (like when the user clicks a button or link)

There are quite a few more, many of which are very specific (for example there are options like display:table which makes the element display like a table, but this is somewhat irrelevant for your question since you asked specifically about hyperlinks) If you wish to read up on the others, you can check out the following web page: https://www.w3schools.com/cssref/pr_class_display.asp

That site is w3 schools, which is a good resource for web development information. You can also google "css display property" if you wish to get information from a different site, or read from more than one source.