make indent for hyperlink in CSS

Question

how can i make an indent for hyperlink ? I've tried as this code but no success.

 a { text-decoration: none; text-indent: 20px; }

 <a href="#h"> html </a>

Answer 1

text-indent is not avalaible for inline elements

https://www.w3.org/wiki/CSS/Properties/text-indent

 a { text-decoration: none; text-indent: 20px;/* not avalaible for inline elements */ display: inline-block; }

 <a href="#h"> html </a>

padding could help

 a { text-decoration: none; text-indent: 20px;/* not avalaible for inline elements */ padding-left:20px;; }

 <a href="#h"> html </a>

Answer 2

Put this into a CSS file and link it to your HTML file using the link tag:

    a {
      text-decoration:none;
      text-indent:20px;
    }

My strong suggestion is go with the CSS file, it's a lot cleaner and allows you to target more elements, not just that specific anchor tag

Answer 3

text-indent is for block or inline-block elements. So you can assign display: inline-block; or display: block; to the a tag and get the desired effect. Here's a demo http://codepen.io/anon/pen/WRvOQd

Answer 4

If you don't want all hyperlinks to be indented, you could wrap it around a <div> with a unique id; this is an alternate solution.

HTML:

<div id="indented">
    <a href="#h"> html </a>
</div>

CSS:

a{
    text-decoration:none;
}

#indented {

    text-indent:20px;

}