@media print margin/padding-top not working

Question

I would like to have some spacing between the top of my page and my logo. However, when I use the print preview in Chrome, no space is showing up at all.

This is my HTML:

<div class="container">
    <img src="design/images/logo.png" alt="logo" class="logo" />
</div>

This is my CSS:

.container {
    max-width: 450px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: red;
}

img.logo{
    width: 337px;
    height: 76px;
    margin: 10px auto 0 auto;
    padding-bottom: 20px;
    float: none;
    display: block;
}

This might help http://stackoverflow.com/questions/1542320/margin-while-printing-html-page — Turnip, May 20 '14 at 08:53
Hello. I already looked at this but it doesn't provide me a solution. — 2339870, May 20 '14 at 08:54
Your code works for me in Chrome: http://jsfiddle.net/xs2b8/1/embedded/result/ I see a gap at the top of the print preview that can be increased by increasing the margin — Turnip, May 20 '14 at 08:58

score 0 · Answer 1 · answered May 16 '19 at 14:32

0

try removing the img.logo and leave just .logo

answered May 16 '19 at 14:32

mcdave umoh

1
1

this doesn't seem like an answer and more like a comment. – saurabh May 16 '19 at 15:05
sry i have been away for a while i meant your class name img.logo{} you are just calling a class logo sry for the delay – mcdave umoh Sep 24 '19 at 05:13

@media print margin/padding-top not working

1 Answers1