I have an image and a border on the bottom of the div that contains it. The problem is that I want the border to be directly on the bottom edge of the image. Instead, there seems to be some natural padding on the bottom that I want to get rid of. How can I do this?
You need to set the images vertical align to top in your CSS :)
img { vertical-align: top /* can be baseline */ }
Hope that helps!
To put border on image
img{
border:1px solid #000;
}
Please share your code to solve your padding issue.
Why don't you apply the border directly to the IMG tag instead of its container DIV?
Related
There is a white border surrounding the banner of the website and it's really annoying me. It is like some sort of border about a width of 10px and white. This takes place at the top of the website.
I would have uploaded a picture, but it won't let me.
Anyways, this is all of the code for the banner:
.image{
padding:0;
margin:0 auto;
width:100%;
}
Is there any possible way I can remove this white border?
Edit:
I solved it by changing the image into a div and making the image the background of the div and positioned it to left by 0 and top by 0.
try adding border: 0 !important;
First thing first check image outer element if have any sort of padding margin or border, if yes then remove it otherwise jus give image width of 100vw instead of 100% .
I want to position a few small images beside a div and margin them correclty instead of being overlapped by the emphasized textcenter-div.
JSFiddle Demo:
`http://jsfiddle.net/k7gLfeuc/`
The Problem is: When I scale the browser-window, the images disappear behind the "center"-div instead of margin to it.
Both Navigation-Div and Center-Div are margin pretty well to each other. But the images wont.
I tried it already with "clear:left/right/both", but with no success.
What am I doing wrong? I just want the images left to the center-div to margin correctly to the center-div.
Than you.
Is this what you need? live demo http://jsfiddle.net/k7gLfeuc/2/
Add below to your existing code:
#side {
left:0;
width: 19%;
overflow: hidden;
}
You can view the page in question here: http://www.envisionlocal.com/
Underneath the blue, you'll see where there's a blank white space before the grey area starts. I believe it's this code:
<div class="bottom_part"></div>
Which uses this CSS:
#banner .bottom_part {
clear: both;
padding: 167px 0 0;
}
But when I remove that from the HTML, I still get the same white space on the page. Does anyone know what I need to change to remove it?
You should inspect your page.
body {
background: url("../images/body_bg3.jpg") repeat-x scroll left 0 #F3F4F4;
}
This is the image: http://www.envisionlocal.com/images/body_bg3.jpg
Your background is one whole image, that gives the impression that there is white space when you remove your div.
Change your background-image:'body_bg3.jpg' in body element
Drip was right, need to fix background image on body.
To fix the issue replace file images/body_bg3.jpg with this
http://i.stack.imgur.com/sTwFE.jpg
and remove dev with class "bottom_part" from html
It's part of the background image here: http://www.envisionlocal.com/images/body_bg3.jpg
When you zoom in you can see a 1px wide image that is repeated horizontally with this style:
background: #F3F4F4 url(../images/body_bg3.jpg) repeat-x left 0px;
You can crop the blue part out of the image or mimic the image with a div structure and styling.
I'm trying to create a border that sits INSIDE an image. So, there should be a 10px or so margin from the edge of the photo to where the border is.
Examples of what it should look like: http://imgur.com/a/lMSMR
You can see the page with the photos here: http://blueboxluxe.com/praise/
Anyways, few parts of this is harder to do... 1) the layout is fluid -- the photo size can change. 2) I want the border to show up on all photos -- no matter the size. 3) On the praise page, there's a lot of floats happening; so, things need to work with that correctly.
I've tried playing with box-shadow, but all I get is a border on the outside of the image. Not inside.
Try the outline property and specify a negative offset:
outline:2px solid red;
outline-offset:-15px;
No IE support though!
you can also try a container div
<div><img src=""/></div>
give div a fixed height and width and overflow hidden.
div{height:100px;width:100px;overflow:hidden;border:1px solid black;}
Maybe create a div within the div that contains the image, set it to
position:absolute;
margin:2% auto;
left:2%;
width:96%;
border:solid 1px #fff;
and then give the element that is containing it:
text-align:center;
Alternatively, if the image is floating in a much larger div that contains other elements, put it into a parent div set to the size of the image then put the new div that will add the border underneath or above the image; do not put the image into the div that you want to use as a border; the reason I used percentages is because it should then resize depending on the size of the image.
If you play around with the numbers it should work as you wish.
you can use the box-shadow property in css3. Use a 1px thick box-shadow with a color would give you that effect on almost all browsers.
H3LLO,
For some reason there is 4px of extra padding appearing under the a element. I am seeing this manifest in both Firefox and Chrome. I remember seeing this phenomenon on Flickr in its early days except it was a blue bar that appeared under s wrapped in elements.
Here is a link to the example code that illustrates my problem. The background: of a has been colored red and the border: of img has been colored gray. As you can see, the a element is extending around 4px below the img.
To see the code just press the "Edit using JSBIN" link that appears at the top right corner when you hover over the window.
Any ideas on how to get rid of a element's extra bottom padding?
Thanks
Adam
add vertical-align:bottom; to your img css properties.
a {display: inline-block}
img {display: block}
Images are rendered inline by default and you need to add display: block or vertical-align: bottom to fix the issue.
The only working way for me is to "remove" the margin is wrapping the image with div and set the size of div exactly the same as the image.
<div style="width:64px; height:64px">
<img src ='image.png' style="width:64px; height:64px" />
</div>
I'm not positive why it occurs, but you could try YUI Reset to fix it.