I have two inline-blocks elements (which are side by side). When I set top margin of one of them, both move. Why?
JSfiddle
HTML
<div></div>
<div></div>
CSS
div {
width: 150px;
height: 150px;
display: inline-block
}
div:first-child {
background: #279B61;
margin-top: 3em
}
div:last-child {
background: #CC3333
}
The default vertical-align causes the bottom of the elements to line up.
If you push one down, it increases the height of the line they both sit on.
Use vertical-align: top (for example) to change that.
Because the default vertical alignment of inline elements is baseline. Setting vertical-align:top will pull the second div back up.
div {
width: 150px;
height: 150px;
display: inline-block;
vertical-align:top;
}
jsFiddle example
Related
I have the following problem: I am creating an inline-block element (.content) within a wrapper-div (.wrapper). If there is content in the .content-div, everything works just fine. But if I remove the content from the .content-div, a space gets added below the inline-block-div.
I am not sure why this happens and how to fix it correctly. Note that after manually removing all spaces and line-breaks in my code the problem persists, but setting the font-size to 0 helps.
Also, setting vertical-align: top to the .content-div helps. I am not sure why exactly.
Whats the best way of fixing it? Why does this happen?
Fiddle: https://jsfiddle.net/cjqvcvL3/1/
<p>Works fine:</p>
<div class="wrapper">
<div class="content">not empty</div>
</div>
<p>Not so much:</p>
<div class="wrapper">
<div class="content"></div>
</div>
.wrapper {
background-color: red;
margin-bottom: 20px;
/* font-size: 0; *//* this would fix it, but why? (problem persists after manually removing all spaces and breaks) */
}
.content {
display: inline-block;
height: 20px;
width: 200px;
background-color: green;
/* vertical-align: top; *//* this would fix it, but why? */
}
Update
I have put together a new fiddle. This should better illustrate my problem. How do I get rid of the green line below the textarea?
https://jsfiddle.net/cjqvcvL3/7/
<div class="content"><textarea>Some
Content</textarea></div>
.content {
display: inline-block;
background-color: green;
}
This happens because you specifically give width and height to the .content.
Have you considered using the :empty pseudo selector?
.content:empty {
display: none;
}
https://jsfiddle.net/cjqvcvL3/5/
Setting your the content display to block instead of inline-block fixes the problem.
.content {
display: block;
height: 20px;
width: 200px;
background-color: green;
/* vertical-align: top; *//* this fixes it */
}
This explains why setting vertical-align to top fixes the problem as well:
The vertical-align CSS property specifies the vertical alignment of an
inline or table-cell box.
Here is a working example: jsfiddle
To remove the gap, you have to surround the content div with a wrapper with font-size:0.
The reason is exained here: answer
inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
inline
This value causes an element to generate one or more inline boxes.
The most important part for this topic would be that the element itself get's formatted not just the content. Every inline-block element will be seen as atomic inline box and thus take up space.
.wrapper2 {
background-color: red;
margin-bottom: 20px;
font-size:0;
}
So I am designing a website right now (pretty nooby at HTML and CSS) but I made a design on Photoshop beforehand so that I could go right through the coding and make the website how I wanted. Well I have an issue. I have two DIV elements inside of a bigger container DIV that won't line up side-by-side, despite using inline-block. Here is the css code:
.contentContainer {
display: block;
width: 700px;
height: 250px;
margin: 20px auto;
}
.topContainer {
height: 230px;
padding: 10px;
background-color: white;
}
.topThumbnail {
display: inline-block;
width: 370px;
height: 230px;
}
.topThumbnail img {
width: 370px;
height: 230px;
}
.topInfo {
display: inline-block;
margin-left: 10px;
width: 300px;
height: 230px;
}
.topInfo p {
width: 300px;
height: 230px;
background-color: pink;
}
The contentContainer is the highest DIV holding my topContent and topThumbnail so I thought I'd throw it into the provided code.
And the HTML code:
<div class="topContainer">
<div class="topThumbnail">
<img src="YT.png" />
</div>
<div class="topInfo">
<p>Testing the information area of the top container or something along those lines</p>
</div>
</div>
Can't post pictures to explain the issue.. need 10 reputation.. will make it hard to describe.
In the design the two containers for the Thumbnail and the Info are supposed to be side-by-side and aligned at the top. The thumbnail is supposed to be on the left of the topContainer and the Info is supposed to be to the right of the thumbnail with a margin of 10. For some reason the info is not going to the right-side of the thumbnail but rather going under it. I have ALREADY set the margin to 0 to fix the default margin issues.
display: inline-block is working correctly in your example. What you need to add is vertical-align: top to your .topInfo div, and get rid of the default margin on your .topInfo p tag. Also, you need to make sure that there is enough room for the .topInfo div to sit to the side of the .topThumbnail div, otherwise it will wrap to the next line.
Like this:
http://jsfiddle.net/hsdLT/
A cleaner solution: I would look at ditching the display:inline-block CSS proporties on these elements altogether and just float them to the left. Then clear the floats by assigning clear:both to the .topInfo css property.
It's less code then your route will be and it's more structurally sound. :D.
.topThumbnail,
.topInfo {
float:left;
}
.topInfo {
clear:both;
}
Other people have already answered this with the solution, but I think it is important to understand why inline-block elements behave this way. All inline, table, and in this case, inline-block elements have the vertical-align property. The default value is set to baseline, hence the need to set vertical-align: top;.
See the docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align.
This other discussion is also helpful: Vertical alignment for two inline-block elements not working as expected
I have a container div and 5 child div's with
{display: inline-block}
so they appear next to each other. Each of the child div's have a height of 20px, but the container grows to a height of 24px. Why does this happen?
Fiddle: http://jsfiddle.net/VHkNx/
Inline block elements still take care of the line-height/font-size. So adding this:
line-height: 0;
to #container will fix it.
Demo
Try before buy
Once you're using the inline-block display, your elements behaves similarly to words and letters. Whitespaces and line heights are rendered as well and it might cause some unexpected results.
One way of solving this is to give the container font-size: 0 setting (of course you can still give the child elements themselves their own font size).
jsFiddle Demo
P.S - line-height: 0 will also work.
One simple way of fixing this is to add vertical-align: top to the child elements:
.thing {
vertical-align: top;
display: inline-block;
background-color: Red;
height: 20px;
width: 18%;
margin-left: 1.25%;
margin-right: 1.25%;
}
This way, you don't need to adjust line heights or font sizes.
As noted earlier, a similar layout can be realized using floats. Both approaches are valid.
See demo at: http://jsfiddle.net/audetwebdesign/74Y2V/
Inline-block elements are placed as block on the base line of a text line, as they are inline elements, so it's the space from the base line to the bottom of the text line that takes up space.
You can use floating elements instead of inline elements:
#container {
background-color: Green;
width: 500px;
overflow: hidden;
}
.thing {
float: left;
background-color: Red;
height: 20px;
width: 18%;
margin-left: 1.25%;
margin-right: 1.25%;
}
#first {margin-left: 0px;}
#last {margin-right: 0px;}
Demo: http://jsfiddle.net/VHkNx/2/
Easiest way is not to give them display: inline-block, but use float: left; . All elements will float next to each other. Good luck!
I have the following js-fiddle. It's basically just a div that has a bunch of square child elements. The issue is that the div doesn't always stay centered. I've already set the following CSS:
.boutique-grid {
text-align: center;
margin-left: auto;
margin-right: auto;
}
I am not sure why it's not centering the child element div's. Any idea?
Remove float left from your .boutique-grid-column class. It will solve the issue.
The boutique-grid is centered, but it's 100% wide. You can set a width to for example, 710px;
.boutique-grid {
overflow: hidden;
width: 710px;
}
.boutique-grid {
text-align: center;
}
.boutique-grid-column {
...
margin: 0 auto;
}
Remove float:left; and this will work fine, you already have display:inline-block; set so no need to float the element.
http://jsfiddle.net/wy7rd/3/
This is what the spec says about float:
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).
This is why .boutique-grid-column becomes block when float is specified and ignores text-align.
Set width of div and image.
.boutique-grid {
width: 300px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Consider the following example: (live demo here)
HTML:
<div id="outer_wrapper">
<div class="wrapper">
<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>
</div>
<div class="wrapper">
<a><img src="http://assets.test.myyearbook.com/pimp_images/home_page/icon_smiley.gif" /></a>
</div>
<div class="wrapper">
<a><img src="http://thumbs3.ebaystatic.com/m/mvHqVR-GDRQ2AzadtgupdgQ/80.jpg" /></a>
</div>
<div class="wrapper">
<a><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/718smiley.png/60px-718smiley.png" /></a>
</div>
</div>
CSS:
#outer_wrapper {
background-color: #bbb;
width: 350px;
}
.wrapper {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 100px;
text-align: center;
margin-right: 20px;
}
a {
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid red;
}
The output is:
Why the black wrappers are not vertically aligned ? How could I fix that ?
The images are horizontally centered in the red boxes. How could I vertically center them ?
Please do not change the HTML, if possible.
Observe that it is the base of the images which are aligned. This is to do with the vertical-align; if you use a value for vertical-align on .wrapper other than baseline, like top, middle or bottom, it will fix it. (The difference between these will only be apparent if you put some text inside the div as well.)
Then you want to centre the images in their 80x80 spots. You can do that with display: table-cell and vertical-align: middle on the a (and add line-height: 0 to fix a couple more issue). You can then play further with mixing these groups of styles in the a tag, the .wrapper, or even throwing away the .wrapper if it isn't necessary (it would only be needed - if it is at all - if you're putting text in with it).
Result, with no further tweaks than what I've mentioned here: http://jsfiddle.net/jESsA/38/.
This will work on all decent browsers, and even on IE8/9, but it won't work on IE6/7. A technique for solving this which should work in IE6/7 is this: on the a, set display to block and alter the line-height from 0 to 78px (I'm not entirely clear on why 80px makes it shift down one pixel, but it does; if I thought about it long enough I could probably figure out why), and shift the vertical-align: middle to the img child. Final result: http://jsfiddle.net/jESsA/44/
You can try assigning a vertical-align attribute on the img tag. Vertical align is relative to the line box which means you need to set the line box as tall as the height of the a tag. So these changes are needed in your CSS markup:
#outer_wrapper {
overflow: hidden; /* required when you float everything inside it */
}
.wrapper {
/* display: inline-block is not required */
/* text-align: center is not required -- see below */
float: left; /* float all wrappers left */
}
a {
display: block; /* block display required to make width and height behave as expected */
margin-left: 4px; /* shift the block to make it horizontally centered */
margin-top: 9px; /* shift the block to make it vertically centered */
text-align: center; /* center inline content horizontally */
line-height: 80px; /* line height must be set for next item to work */
}
img {
vertical-align: middle; /* presto */
}
Demo here.
Take a look at this:
http://jsfiddle.net/jESsA/37/
Basically you use float: left to put your boxes inline and a background image instead of an img tag. Because you are using float, you need to clear after to cancel the float effect on other elements.
I changed the DIV tags to A tags so you can have a link on the hole block and keep it simple. But you can keep it as a DIV tag and put an A block inside though (or use JavaScript)
.wrapper {
float: left;
}
http://jsfiddle.net/jESsA/3/
You could check this out: http://www.brunildo.org/test/img_center.html
may be this will help you
http://css.flepstudio.org/en/css-tutorials/centered-vertical-horizontal-align.html
it helped me :)