问题
I'm fairly new to the whole HTML and CSS thing, so apologies in advance for my cluelessness! I've been trying and failing to align my post images with my text on my blog:http://kittenasacat.blogspot.ie/2013/08/saturday-sweetness-my-caramel-squares.html The content body is 600px wide and so are my pictures, but they are being slightly indented so that the right side of them is cut off a little. I've successfully managed to get everything else in line, but not these!
.post{
width:100%;
height:auto;
padding:0;
margin:5px 0 30px;
border-bottom:none;
}
.post-body{
margin:0 0 .75em;
line-height:1.6em;
font-size:11px;
font-family:Arial;
text-align:justify;
}
.post h3{
font-size:30px;
margin:0;
padding:5px 0;
text-align:left;
font-family:Yanone Kaffeesatz, sans-serif;
text-transform:uppercase;
}
.post img{
padding:0;
min-width:600px;
}
.thumbs img{
margin-left:0px;
}
.post-footer-line-1,.post-footer-line-2,post-footer-line-3,.post-footer{
display:none;
}
I'd say this is probably something obvious, but it beats me. Let me know if you need more information! Thank you so much in advance for your help! (:
回答1:
looking at your website, I found an a-tag around the image with inline styles:
<a href="[...]" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="[...]">
</a>
Thus, just removing the inline styles will also remove the margins :)
回答2:
I think this style setting is your problem ...
style="margin-left: 1em; margin-right: 1em;"
When I turned them off the image moved to the right and the cut off part appeared.
回答3:
style="margin-left: 1em; margin-right: 1em;"
can be fixed to none
. See the post for detail.
来源:https://stackoverflow.com/questions/18607245/how-can-i-remove-unwanted-left-margin-padding-from-post-images