This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 1 year ago.
I'm totally beginner, but I really don't know why there is a space between the bottom of my image and my wrap div border!
What's this???
<div class="myItem">
<img src="https://picsum.photos/100">
</div>
.myItem {
border: 5px solid blue;
background: tomato;
}
https://jsfiddle.net/g7rvm0ub/1/
Add display:block to img will remove the bottom space, another approach is add vertical-align:middle to img.
I'm not sure why the div is 5 pixels bigger than the the image, as I am a bit of a beginner as well, but one way to fix it is to decrease the size of the div using height: 100px.
Related
This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 2 years ago.
What can I do to make it so that a border is only as wide as the p element it is applied to in CSS?
I also want to make it so that it auto-changes the size of the border if I were to change the text?
This is what it looks like without any fixing:
1
This is what it looks like when I manually change the size and then change the text:
2
I just want it to change depending on the length of the text. Thanks!
Display inline-block will do the trick.
div p{
border: 1px solid #000;
display: inline-block;
padding: 2px 4px;
}
<div>
<p>Home</p>
<div>
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
I've been looking online for a viable solution to my problem but could not find a clear answer, so I am posting it here.
The problem is that I want to have the image cover the entire , but there seems to be some left over space below the image and I can't seem to be able to fill it up. I'm taking about the blue space in the as shown in this image:
I'm not looking for a workaround the solution. I just want a definitive solution that corrects the problem
Just add a display: block or vertical-align: top to your img tag.
img {
width: 100%;
height: auto;
display: block;
}
.cover {
background-color: blue;
}
<div class="cover">
<img src="//unsplash.it/460/345" width="460" height="345" alt="">
</div>
Try changing
img {
width: 100vw;
height: 100vh;
display:block
}
It is good if you can post a jsfiddle. so then we can looking into your actual code.
What I usually do for images is first determine if the image is landscape or portrait (i.e. if the image is wider than it is tall or vice-versa). Then I set the image's height or width to 100% depending on the orientation. And then overflow: hidden on the parent container so that the result is an image that has preserved the aspect ratio and covers the container.
This question already has answers here:
CSS make colours go off to sides
(3 answers)
Closed 7 years ago.
I have a layout comprised of two columns that span the full width of the page. The left column is a lighter colour, the right is a darker colour. I need the text to span the container width but the backgrounds to span the full width of the page, proving far more difficult than I initially thought.
Here's my page structure, it's really simple, but it contains absolutely everything, rather than just the content. Is there any elegant way of containing the content while leaving the background to fill the page?
<div class="container">
<div class="col-xs-4" style="background-color: #ddd; height: 100%">
..Menu..
</div>
<div class="col-xs-8" style="background-color: #aaa; height: 100%">
..Content..
</div>
</div>
Fiddle below:
http://jsfiddle.net/uv4LkgL5/1/
Just remove height:100% from body, html, .container, .container-fluid will solve your issue.
body, html, .container, .container-fluid {
padding-left: 0px;
padding-right: 0px;
}
Check Fiddle Here.
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 8 years ago.
How do you center a div or anything else horizontally, so that on both sides the empty spaces are equal? And the div is exactly in the middle? No matter the size of the objects.
Take for example: the Stackoverflow site itself.
Except for the black header on the top of this site, everything is in the middle and the empty spaces on both sides are equal to each other.
I've searched for a long time, but I only encountered the wrong answers or vague answers.
Please help and thank you!
In css, you can use margin: auto;
A common pattern is to wrap your content in a container with a fixed width and add margin: auto; to it.
try this. here is why
margin: 0 auto;
The common way is using margin:0px auto. Look at the following example.
HTML
<div id="wrapper">
<div class="test">
This is my content Div.
</div>
</div>
CSS
.test
{
width:60%;
border:1px solid #ccc;
margin:0px auto;
}
DEMO
This question already has answers here:
Fit background image to div
(8 answers)
Closed 3 years ago.
Why won't it show the whole original picture?
.test {
background: url("http://i27.tinypic.com/28ktoh.jpg") no-repeat;
}
<div class="test"></div>
Problem is that is doesn't show anything, if you type something in the div it shows a little bit of the image. I want it to include the full picture.
Here is the working demo
You need to specify the height
.test {
background: url("http://i27.tinypic.com/28ktoh.jpg") no-repeat;
overflow:auto;
height:500px;
}
Set the height of the div. The div will not be higher than you tell it to be or higher than it needs to be.