Question

For awhile I was avoiding upgrading my bootstrap-sass gem in my ruby project because of one single change :

height: auto;

inside the img element.

This property seems to override explicit height properties.

So I have an image that is width 1, height 32 and I use it as such :

<img height="1" width="15" src="/assets/spc.png" alt="">

The height: auto; seems to force the image to display as 15 x 480 (32 x 15 = 480).

I have tried to redefine the img element by adding in-line style in the HEAD of my HTML, (for example img { }) but this does not seem to help.

I am not sure what the appropriate solution is. I use blank images around my site to create specific spaces between other elements. I probably can do this with some other kind of element, like a div or a span?

Answer 1

how about using margin?

you can for example:

.spacerdiv{

height:1px;
width:15px;
}

add the div in the html and define this class to them.
But that’s very bad practice. adding redundant elements to DOM

or even better just define margin

You can do it object oriented and define things like:

.margin_left_part_of_site{
margin: 5px 15px;
}

You can then add this class to every element that must have these properties.

A jsfiddle example would allow further help.