I'm starting to style my portfolio site but I'm having an issue when it comes to displaying the images. In my CSS, I've declared the list item to have a width of 230px but somehow Wordpress is not complying and is setting its own width (see image attached). It's also setting a margin on it's own and I can't seem to remove it, but I can add to it. Really odd.
It looks like they're both 230px, unless you're talking about it becoming 232px? It's becoming 232px because of your 1px border on each side. You have two simple options: 1. Make the width/height 228px 2. Give the li box-sizing: border-box and it will calculate width/height including borders and padding/margins.
@joshuanhibbert You should put this solution on your blog as I went there to find an alternate solution but couldn't find one that suits not being able to alter the markup.
@TheDoc Yeah, that's what I read on Josh's blog and one of the articles here. I really hate the way Wordpress displays your markup in view source. The code is extremely misaligned and adds ridiculous amounts of spacing so using font-size: 0; was a perfect solution. Thanks Gray.
It's becoming 232px because of your 1px border on each side. You have two simple options:
1. Make the width/height 228px
2. Give the li
box-sizing: border-boxand it will calculate width/height including borders and padding/margins.However, I still can't seem to remove the margin that Wordpress is setting.
So I narrowed the issue down to 'inline-block' but have no idea how to remove the whitespace since I won't be able to alter the HTML.
Fiddle
@joshuanhibbert You should put this solution on your blog as I went there to find an alternate solution but couldn't find one that suits not being able to alter the markup.
Using the font-size trick is a little hackish, I suppose, but it could work in this case.
The only problem you might encounter is if you do eventually want text in there, perhaps for captions.