I’ve been coding my website and I stumbled upon a head scratcher. Long story short I’ve been trying to move my hyperlink text up closer to its corresponding image, but it won’t budge at all. I’ve used margins, the “margin-right” and “margin-left” tags have worked but, not the “margin-top” and “margin-bottom”. I tried using the latter two tags, but it is not working. I don’t know if my hover effect code is affecting this. Thanks!
You can find this problem by going to my website www.rannitv.com/magazine. Then click on the “Personal Stories Section”.
Code I Used for Hyperlink Text
a.ps-title2 {
margin-left: 530px !important;
margin-bottom: 80px !important;
font-size: 20px !important;
color:#333333 !important;
}
a.ps-title2:hover {
text-decoration: none !important;
color: orange !important;
}
Because an anchor element is inline and margins won’t work. You need to read up on the “box model” and how margins, padding and inline boxes work.
Keep in mind that images, inside an
<img>element are inline, too. So what you can try is to make the image a block level element, or the text, or use inline-block. These will allow you to apply margins.