0

I was intending to set the p tag next to my image and moving the top a bit. The code as following:

    <style>
      * {
        margin:0;
        padding:0;
      }
      p {
        display:inline-block;
        margin-top: -20px;
      }
    </style>
    <body>
      <img src="myimg.png">
      <p>this is the intro of the page</p>
    </body>

I found no matter what value I set to the margin-top or margin-bottom of the <p> tag, it won't work as expected, is it something problem with calling display:inline here?

Jonathan
  • 6,507
  • 5
  • 37
  • 47
mystreie
  • 133
  • 1
  • 2
  • 14
  • 1
    Possible duplicate of [CSS display: inline-block does not accept margin-top?](https://stackoverflow.com/questions/7611030/css-display-inline-block-does-not-accept-margin-top) – Jonathan Oct 11 '17 at 22:29

1 Answers1

0

You cannot put a negative margin on an inline or inline-block element like that. You could add a position:relative; and a negative top.

* {
  margin:0;
  padding:0;
}
p {
  display:inline-block;
  position: relative;
  top: -20px;
}
<img src="http://placehold.it/200x200">
<p>this is the intro of the page</p>

Also, I am assuming that you will change the CSS? Going that global (by affecting all the elements with * and all the paragraphs with p) seems rather drastic. Better to use classes and target what you want.

Jonathan
  • 6,507
  • 5
  • 37
  • 47
  • Hey thanks for your answer Jonathan, that's working for me! just i have a question about is the top property is work same as margin-top here? – mystreie Oct 11 '17 at 22:34
  • And personally i like to make * to reset all the margins and paddings in the start, i am wondering is this a good habit? I got this from a video – mystreie Oct 11 '17 at 22:35
  • Awesome! Not quite sure what you mean by "is work same", because (as you have seen) margin-top does not do anything with inline elements. If, however, you mean does `top:0;` leave it where it is and `top:-10px;` move it up by 10px, then yes. – Jonathan Oct 11 '17 at 22:35
  • Regarding `*`, if you like working that way, it is fine! Just realise that you will have to add margin beneath your paragraphs and headers for spacing, to indent your list-items, etc. It's really a matter of preference though. But putting a negative margin on all paragraphs is probably not a good idea, nor making them all inline elements; that is what spans are for. – Jonathan Oct 11 '17 at 22:37