It appears as if there is padding between two of my elements - content1 and footer. I do not want this 'padding' but I cannot understand why it is there at all. Here is part of problematic html text on its own - the 'padding' still appears. I've tried adding in padding: 0 and margin: 0 to both the elements with no result.
<style type="text/css">body{ margin: 0;}.footer{ position: relative; width: 100%; min-width: 512px; height: 150px; background-color: black; font-size: 12px; font-family: arial; color: gray; z-index: 5;}.content1{ position: relative; width: 100%; height: 300px; background-color: #E6E6E6; z-index: 5;}.imagecontainer{ height: 80%; float: right;}.image{ position: relative; display: block; height: 100%;}</style><body><div class="content1"><!--<div class="textcontainer"><p style="color: gray; font-size: 15px; font-family: arial;">this is some text</p></div>--><div class="imagecontainer"><img class="image" src="C:\Users\wrigh\Pictures\SWITCH\capture01.png"></img></div></div><div class="footer"><center><p style="padding-top:50px; max-width: 50%;">ONLY AVAILIBLE ON ANDROID<br><br>UPDATE: NO CURRENT WORK IS SCHEDULED</p></center></div></body>In response to the proposed answer to this question. I have removed the image from the text and unfortunately the 'padding' was not removed.