crassfh crassfh - 1 year ago 69
HTML Question

Margin and Padding makes image bigger

I want to push the logo.png so it is about a third of the way across the page. When I create a large padding or margin, the image gets larger despite the other code limiting the image size.

.header {
width: 200px;
height: 60px;

.class {
margin-left: 300px;

<div class="header">
<tr><td><img src="Logo.png" class="class"></td></tr>

Is there a way to push the image further horizontal while keeping the image size the same?

Answer Source

The problem is the following: With margin-left on the img tag which is inside of the td you change the width of the td to the value of margin-left (it just adapts the size of it's children). To keep proportions the image scales up. Since table cells does not respect width and will be collapsed based on the width of the entire table, you have to specify the width of table to set a limitation of width or maybe switch to <div> elements where you have full flexibility.

The header width / height does not limit the width/height of your table, because – as I said – it's adapt it's children widths / heights. So the inner element (the table) is bigger, so it overflows his parent.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download