CODEWITHSUNDEEP
htmlcss
Mehdi Haghgoo
Mehdi Haghgoo

Reputation: 3484

inline element does not accept margin-top

I am trying to give magins to inline elements (image thumbnails for a photo gallery). But it seems margin-top is ignored for my elements.
Markup is

<div id="row1-left">

            <div id="gallerypreview">
                <img id="#previewImg" alt="preview for image" src="gallery/autumn1.jpg">
            </div>
            <div id="gallerythumbs">
                <div id="gallerythumbsInner">
                    <div class="gallerythumb">
                    <img src="gallery/autumn1.jpg">
                    </div>
                    <div class="gallerythumb">
                    <img src="gallery/autumn2.jpg">
                    </div>
                    <div class="gallerythumb">
                    <img src="gallery/autumn3.jpg">
                </div>
                </div>
            </div>

        </div>


Style is:

#row1-left{
width: 460px;
height: 310px;
float: right;
margin: 15px 15px 0px;
}

#imggallery{
    width:450px;
    height:300px;
    margin:5px;

}
#gallerypreview{
    width:450px;
    height:200px;
    margin:2px 5px;
    border-radius:20px;
    background-color:#E7E7E7;


}
div#gallerypreview>img{
    margin:1px 25px;
    width:400px;
    height:198px;
}
div#gallerythumbs{
    margin:5px 5px;
    width:450px;
    height:90px;
    background-color:#E7E7E7;
    border-radius:5px;

}
#gallerythumbs .gallerythumb{
    display:inline;
    width:140px;
    height:86px;
    margin:5px 5px;
}
div.gallerythumb>img{
    width:138px;
    height:76px;
}

According to some old posts on SO, margin-top is not applied to inline non-replaced elements. My questions is if there is any hack to get this done, for example, for my inline image thumbnails that are to be space from their top parent element?

Upvotes: 0

Views: 1646

Answers (2)

Friend
Friend

Reputation: 516

display: inline; Do not respect top and bottom margins ...

Upvotes: 0

Mudassir
Mudassir

Reputation: 1156

Inline elements and margins is a hot topic because of its unusual activity. Some people use padding to overcome this problem.

.....

Another way is to use display:table; instead of display:inline;

best way is to....

use css styling like this

div{
position:relative;
top:-2px;
}

this brings the div 2 pixels down.

Upvotes: 2

Related Questions