I'm working an a site and experiencing a weird issue with an image in a block element. When placing this image in a block, with all the padding and margins set to 0, there still as a space underneath the image. Here's the code:
<section class="page-block">
<div class="wrapper">
<img src="http://navelpluisje.nl/theme/navelpluisje/images/ik.png"/>
</div>
</section>
.page-block {
position: relative;
background: red;
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
width: 200px;
margin: 0 auto;
padding: 0;
}
img {
width: 200px;
background: white;
}
I've created a jsFiddle overhere with the problem.
I've tested it on windows and osx on several browsers and they all have the same issue.
Does anyone know where this comes from?
Thanx
You need to set the vertical-align top as demonstrated in the following JSFIDDLE.
img {
width: 200px;
background: white;
vertical-align:top;
}
Truth be told, I found this answer with the following SO Question. Which explains the following:
By default, an image is rendered inline, like a letter.
It sits on the same line that a, b, c and d sit on.
There is space below that line for the descenders you find on letters like f, j, p and q.
You can adjust the vertical-align of the image to position it elsewhere.
Its caused by the default display property, inline, of img tag.
You can change it to block to get rid of that white space
img {
display: block;
}
reference for inline-block
Use below CSS Code:
CSS
img {
width: 201px;
background: white;
/* height: 100%; */
vertical-align: bottom;
}
Related
I am trying to place two divs of width 50% each but somehow its not appearing on same row, but if I do 49% it stacks in same row. Can anyone please tell me what I am doing wrong with the code(more interested to know the cause than solution).
CSS -
* {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
}
.left-c {
width: 50%;
background: #3EF00C;
display: inline-block;
}
.right-c {
width: 50%;
background: #2E4E6E;
display: inline-block;
}
HTML -
<div class="wrapper">
<div class="left-c">
<p>LEFT ----- This is going to be some random text placed in a a left container inside the wrapper. I hope this text will suffice the requirement.</p>
</div>
<div class="right-c">
<p>This is going to be some random text placed in a a right container inside the wrapper. I hope this text will suffice the requirement. ----- RIGHT</p>
</div>
</div>
JS Fiddle - https://jsfiddle.net/no0chhty/1/
This is a classic issue with elements of type inline-block. Unfortunately, they take document whitespace into account, including blank characters. There are multiple solutions for this, but the one I tend to use involve setting their parent element to font-size: 0 and then resetting the font size on the inline blocks to your desired value.
Read more about this here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Add float:left; to the class "left-c"
.left-c {
width: 50%;
background: #3EF00C;
display: inline-block;
float:left;
}
Please check out the FIDDLE
Change display: inline-block
to display: table-cell
for both sections like so:
.left-c {
width: 50%;
background: #3EF00C;
display: table-cell;
}
.right-c {
width: 50%;
/* 49% works well */
background: #2E4E6E;
display: table-cell;
}
Here is the JSFiddle demo
replace this css
* {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
display:flex
}
.left-c {
width: 50%;
background: #3EF00C;
}
.right-c {
width: 50%;
background: #2E4E6E;
}
hi instead of inline block you can you float or flex like this:
link here https://jsfiddle.net/JentiDabhi/r9s3z07e/
CSS
.left-c {
background: #3ef00c none repeat scroll 0 0;
float: left;
width: 50%;
}
<div class="wrapper">
<div class="left-c"><p></p></div><!----><div class="right-c"><p></p></div>
</div>
putting comment between closing tag of left-c and opening tag of right-c will solve the issue.
Example
This code leaves this weirdly shaped border (it's the active link border) when you click the image, like so:
And when we put an orange background on the <a> element we see that there's an orange area underneath the image. So, <a> wraps around the image, but also around an area underneath it.
Why does <a> do that?
First, by default element has an 'outline' decoration, to disable it use the following css rule:
a { outline: 0 }
Second, the area is created by another css property you apply on the image itself: 'margin', which is the margin between the image to the elements around it, in this case it affects the element which wraps it, to fix that change the following rules:
.socialBtn {
/* Removed margin here so there won't be space around image */
height: 2.5em;
width: 2.5em;
}
a {
height: 2.5em; /* Gave it width like the image */
width: 2.5em; /* Gave it height like the image */
display: inline-block; /* Made it inline-block so it can have width and height */
}
http://jsfiddle.net/we67Lp6o/6/
UPDATE:
Changing source to understand how the display property: block vs inline-block vs inline.
Removed "outline: 0" from a selector, it is a bad practice, read why here.
It's actually not spacing underneath at all. It's because your a tag is collapsed due to the default setting of display:inline. Adding display: inline-block to those as will fix that issue:
FIDDLE
Alohci offers a great explanation on why this happens
UPDATE
The extra spacing is the margin on the img:
.social a {
display: inline-block;
background-color: orange;
padding: 0;
margin: 0;
vertical-align: top;
}
.socialBtn{
height: 2.5em;
width: 2.5em;
padding: 0;
margin: 0;
vertical-align: inherit;
}
NEW FIDDLE
The spacing answer can be provided here
inline-blockis the property you need for the <a> elements. For the spacing issues, the margins need to be removed.
The reason for the strangely shaped border, is of the outline property on <a>. It's showing you the area of your link, but due to the display and margin properties it is a different size than your img.
Here is the new CSS:
.header {
width: 650px;
height: 150px;
clear: left;
margin: 0px auto;
background-color: #efefef;
position: relative;
border-radius: 4em 4em 0 0;
}
.social{
padding: 1em 2em 0 0;
display: inline-block;
position: absolute;
right: 0;
}
.socialBtn{
height: 2.5em;
width: 2.5em;
}
img {
display: block;
}
a {
display: inline-block;
background-color: orange;
}
http://jsfiddle.net/Lg5a0ksg/4/
Set your images to display: block (or alternatively, to vertical-align: bottom) to remove the default space at the bottom. (By default, images align to the baseline of any potential text next to them, and they leave that space there even if there's no text beside them.)
I have a problem with the padding or margin of images. I use a lot of images on my site and they are fill a div element so that there are like 8 in a line and in the next line 8 again.
Now I always get a weird spacing between them and I cant figure out why. I tried using negative values but I don't think that is the right way. That's why I am asking here.
I tried using dispay:block but that brings the pictures all in 1 row, which I don't want. I want them to be side by side until they reach the max-width of the div.
my code looks like this:
img {
width: 50px;
height: 50px;
/* display: block; */
padding: 0;
margin: 0;
}
Here a jsfiddle to express my problem: http://jsfiddle.net/cv5Xk/
img {
float: left;
width: 50px;
height: 50px;
/* prob. you dont need this */
padding: 0;
margin: 0;
border:0;
}
The difference between these two lines
<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'><img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'>
<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'> <img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'>
is that the 2nd one has a space between the two images and depending on the font it that space will vary.
The solution is to butt the images next to each other on the same line in the html code.
Use float: left;
img {
width: 50px;
height: 50px;
/* display: block; */
padding: 0;
margin: 0;
float:left;
}
Remove spaces between img tags and use css vertical-align:top
HTML:
<img src='http://i.imgur.com/wipljF1.png'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>
CSS:
img {
width: 50px;
height: 50px;
padding: 0;
margin: 0;
vertical-align:top;
}
I'm trying to have the background colour of one post expand the width of the browser but to no avail.
This is the site
I've tried
.content-wrapper, #yui_3_10_1_1_1384098450067_262{
background: black;
position: absolute;
width: 1200px;
}
and
.content-wrapper, #yui_3_10_1_1_1384098450067_262{
background: black;
position: aboslute;
width: 100%;
}
but that affects the whole post and shifts it to the left.
Where am I going wrong?
If I'm understanding your question correctly, you need to add the following to your CSS:
body {
margin:0;
}
Instead of absolute, use 'relative'. Set your width to 100%.
Add the following CSS at the end of your CSS file (or find these rules in your code and amend them to the following):
#site {
padding: 130px 0;
}
#canvas, .content-wrapper {
max-width: none;
}
I have following fiddle: http://jsfiddle.net/BFSH4/
As you see there are two issues:
The h1 and h2 aren't vertically aligned.
The nav and the content aren't horzontal alligned.
For the 1. I already tried margin and padding. No success...
The second one also isn't that easy the common ways of floating and using inline-block don't work...
What am I doing wrong?
I finally managed floating the header. The problem was that hgroup isn't a block element.
However even it worked after all I think it is better to use a real image for the enterprise name and slogan.
Now only the issue with the horizontal alignment fails.
I don't know why:
http://jsfiddle.net/BFSH4/2/
I can do what I want there is no way that they wan't to be side by side!
Solution for your first problem (found here):
HTML
<div class="header">
<span></span><img src="images/prototype.png" /><hgroup><h1>Prototype</h1><h2>SideBySide</h2></hgroup>
</div>
CSS
.header {
height: 160px;
border: 1px solid #8a2be2;
/* text-align: center; */
}
.header span {
height: 100%;
vertical-align: middle;
display: inline-block;
}
.header img {
display: inline-block;
height: 160px;
float: left; /* added, so the image will appear left to the text correctly */
}
.header hgroup {
margin: 0;
vertical-align: middle;
display: inline-block;
}
This solution depends on display: inline-block
Solution for the second problem:
.nav {
width: 229px;
display: block;
margin: 0 auto;
}
Live demo: http://jsfiddle.net/BFSH4/4/