CEP panel - Margins different in AE and Chrome browser

Report · Apr 22, 2020

Hi
I'm making a CEP panel and I have this simple html:

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<meta name="viewport">
		<title>Title</title>
	</head>
	<style>
		body {
			margin: 0px;
			padding: 0px;
		}
		.button {
			margin: 0px;
			padding: 0px;
		}
	</style>
	<body>
		<div>
			<input class="button" type="image" width="20" height="20" src="images/image.png"/>
			<input class="button" type="image" width="20" height="20" src="images/image.png"/>
			<input class="button" type="image" width="20" height="20" src="images/image.png"/>
		</div>
	</body>
</html>

If I preview it in chrome it will get the correct margin of 0. But when i view the panel in AE it gets a margin of 3.
What am I doing wrong? Shouldn't Chrome render the same way as the CEP panels?

All the best
Jakob Wagner

Report · Apr 22, 2020

No, it shouldn't. This is even documented in the relevant docs for Chromium of for that matter Mozilla/ Firefox. Browsers use invisible margins and different origins for their rendering all the time and conversely the CEP engine may have a standard built-in padding to accommodate frames, separators or simply prevent UI elemnts from overlapping.

Mylenium

Report · Apr 22, 2020

OK. Thank you for replying.

Do you know how I can get a margin of 0? Or are you saying that wont even be possible?

- Jakob

Report · Apr 22, 2020

Just realized I can set the margin to a negativ value to achieve a 0 margin.

Adobe Community

CEP panel - Margins different in AE and Chrome browser

1 Correct answer