Negative margin is not working after setting display:inline-block
Question
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?
1 answers
solution1
0 2017-10-11 22:26:44
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.