Found solution that works:
margin-bottom:-10px
There you are! using something with a bottom sorts any problem!
- Visitors can check out the Forum FAQ by clicking this link. You have to register before you can post: click the REGISTER link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below. View our Forum Privacy Policy.
- Want to receive the latest contracting news and advice straight to your inbox? Sign up to the ContractorUK newsletter here. Every sign up will also be entered into a draw to WIN £100 Amazon vouchers!
Reply to: CSS unexplained vertical spacing
Collapse
You are not logged in or you do not have permission to access this page. This could be due to one of several reasons:
- You are not logged in. If you are already registered, fill in the form below to log in, or follow the "Sign Up" link to register a new account.
- You may not have sufficient privileges to access this page. Are you trying to edit someone else's post, access administrative features or some other privileged system?
- If you are trying to post, the administrator may have disabled your account, or it may be awaiting activation.
Logging in...
Previously on "CSS unexplained vertical spacing"
Collapse
-
CSS unexplained vertical spacing
Doing a page of images with captions below. The images are of very different sizes and proportions.
Style:
.center {margin:0 auto; width:80%; max-width:1000px; border:1px solid black;}
.content {margin-left:2%;}
.pic {width:23%; margin-left:1%; vertical-align:bottom;}
.txt {width:23%; margin-left:1%; vertical-align:text-top; text-align:center; display:inline-block; background-color:yellow;}
HTML:
<div class="center">
<div class="content">
<img class="pic" alt="x" src="ottersonrocks.jpg">
<img class="pic" alt="x" src="clocktowerwest.jpg">
<img class="pic" alt="x" src="otters&ivy.jpg">
<img class="pic" alt="x" src="otterstails.jpg">
<h3 class="txt">balh blah</h3>
<h3 class="txt">lots of drivelin and stuff on and on<br></h3>
<h3 class="txt">tripe</h3>
<h3 class="txt">eh?</h3>
</div>
</div><!--end center-->
Almost working but can't see why I'm getting an unwanted white space between image and caption as here:
Any CSS experts see why? Cheers!
PS "Solutions" I've found online don't work, display:block; screws things up totally, setting background-size, border, padding, margin etc make no difference.Last edited by xoggoth; 18 July 2018, 11:44.Tags: None
- Home
- News & Features
- First Timers
- IR35 / S660 / BN66
- Employee Benefit Trusts
- Agency Workers Regulations
- MSC Legislation
- Limited Companies
- Dividends
- Umbrella Company
- VAT / Flat Rate VAT
- Job News & Guides
- Money News & Guides
- Guide to Contracts
- Successful Contracting
- Contracting Overseas
- Contractor Calculators
- MVL
- Contractor Expenses
Advertisers
Contractor Services
CUK News
- Streamline Your Retirement with iSIPP: A Solution for Contractor Pensions Sep 1 09:13
- Making the most of pension lump sums: overview for contractors Sep 1 08:36
- Umbrella company tribunal cases are opening up; are your wages subject to unlawful deductions, too? Aug 31 08:38
- Contractors, relabelling 'labour' as 'services' to appear 'fully contracted out' won't dupe IR35 inspectors Aug 31 08:30
- How often does HMRC check tax returns? Aug 30 08:27
- Work-life balance as an IT contractor: 5 top tips from a tech recruiter Aug 30 08:20
- Autumn Statement 2023 tipped to prioritise mental health, in a boost for UK workplaces Aug 29 08:33
- Final reminder for contractors to respond to the umbrella consultation (closing today) Aug 29 08:09
- Top 5 most in demand cyber security contract roles Aug 25 08:38
- Changes to the right to request flexible working are incoming, but how will contractors be affected? Aug 24 08:25
Leave a comment: