Consider the following example where I have several inline-block elements in a container element that will potentially shrink in width to the point where the elements within it will wrap.
I would like for there to be a small bit of space between each "row" or contained elements. Using a margin-top or margin-bottom I get the space that I want. However, there is a small bit of space either on the first or last row of elements.
Is there a way to target the line wrapped elements but not the first line?
#container {
width: 10em;
background-color: blue;
}
#container > span {
display: inline-block;
padding: 0.25em;
margin: 0;
background-color: lightblue;
}
#container > span:not(:last-child) {
margin-right: 0.25em;
}
/*The following rule doesn't exist*/
#container > span:not(:first-row) {
margin-top: 0.25em;
}
<div id="container">
<span>some</span><span>text</span><span>of</span><span>some</span><span>elements</span><span>that</span><span>should</span><span>wrap</span>
</div>
Is there a way to target the line wrapped elements but not the first line?
No, not as of now.
However, there is a small bit of space either on the first or last row of elements.
In most situations, you should be able to mitigate that by a negative margin on the container element, like so:
#container {
width: 10em;
margin-bottom: -0.25em;
background-color: blue;
}
#container > span {
display: inline-block;
padding: 0.25em;
margin: 0 0 .25em 0;
background-color: lightblue;
}
#container > span:not(:last-child) {
margin-right: 0.25em;
}
.test { background:red; }
<div id="container">
<span>some</span><span>text</span><span>of</span><span>some</span><span>elements</span><span>that</span><span>should</span><span>wrap</span>
</div>
<div class="test">I am where I should be.</div>
(Added the red div to show that there’s no offset between it and the previous element.)
You can't target a bunch of spans as a row, especially if they're just wrapping when they don't fit on one line anymore.
You'd need to wrap the content in <div class="row"> for example. Then you could say .row:first-child { /* Custom styling */ }.
This might be possible in the future, but as it stands it can't be done.
Related
This is my code:
div {
font-size: 130px;
display: inline-block;
}
div span {
display: inline-block;
font-size: 30px;
transform: translateY(-70px);
}
<div>My Text<span> 2021</span></div>
If the window size gets smaller, then it can happen that 2021 stands alone in one line. But the line should never break like that, only after My. So it should work like that: My<possible break>Text<never a break> 2021.
How is it possible to code that? Is there an easier way than using a white-space container around?
If I use inline instead of inline-block, it generally works, but then this translateY is not possible, unfortunately.
Make the width of span equal to 0 and add some padding to the container
div {
font-size: 130px;
display: inline-block;
padding-right: 65px; /* here */
}
div span {
display: inline-block;
width: 0; /* here */
font-size: 30px;
transform: translateY(-70px);
}
<div>My Text<span> 2021</span></div>
You can use combo of position:relative and position:absolute and have more granular control over the position of span using top,left,right,bottom or transform:translate variants, whatever works for you.
I have used translateY to get the desired result :-
div {
display:inline-block;
font-size: 130px;
position:relative;
}
div span {
position:absolute;
font-size: 30px;
transform:translateY(50%);
}
<div>My Text<span> 2021</span></div>
I have container with css elements. All of the elements has display: inline-block property. The problem is that one of the element is twice hire than the rest and instead of having two elements on the side I have only one and a lot of white space. This is how it looks:
my css is:
.productBlock {
display: inline-block;
background-color: darkgray;
height: 271px;
width: 161px;
margin: 3px;
}
.productBlock-higher {
background-color: darksalmon;
height: 548px;
width: 161px;
margin: 3px;
display: inline-block;
}
How can I remove the white space and add element another element there?
I would like to add move two elements on the right side of the higher div. It should look like this:
if I understand correctly, you need to set the vertical align top
https://codepen.io/opmasan/pen/vYNvbpZ
.productBlock {
vertical-align: top;
}
I solved it. I added:
.productBlock-higher {
float: left;
}
I am trying to add a table border for just the inner sections, I don't want the borders to be placed at the first and last cell.
So, I tried:
.grid > div:last-of-type {
border-right: none;
}
However, as you can see in the image, the last cell is 5px larger than the rest now, that is because it is trying to fill the empty space left behind when we removed the padding from it... How can I remove the padding, but keep its height the same as the others? maybe a way to make all of them stretch to fit? please bare in mind, I can't add a fixed height as the number of cells will change and their hight may vary.
I have also tried adding border-collapse:collapse; it stretched them (AWESOME!) but the middle cell is now slightly smaller than the other two.
Here is a JsFiddle: http://jsfiddle.net/ju76y/5/
(Added images to the fiddle)
.grid {
width: 100%;
overflow: hidden;
background-color: green;
display: table;
table-layout: fixed;
word-wrap: break-word;
text-align: center;
letter-spacing: 0px;
word-spacing: 0px;
}
.grid > div {
display: table-cell;
vertical-align: top;
border-right: 5px solid red;
}
.grid > div:last-of-type {
border-right: none;
}
Try adding this to the cell property:
box-sizing:border-box;
This will align the last div to align properly with others
.grid > div:last-child > div {
margin-top: -2px;
}
DEMO
same need to be applied for the first child also
.grid > div:first-child > div {
margin-top: -2px;
}
<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
}
#right {
width: 50%;
background: orange;
display: inline-block;
}
</style>
</head>
<body>
<div id="left">Left</div>
<div id="right">Right</div>
</body>
</html>
JSFiddle: http://jsfiddle.net/5EcPK/
The above code is trying to place the #left div and the #right div, side by side, in a single row. But as you can see in the above JSFiddle URL, this is not the case.
I am able to resolve the issue reducing the width of one of the divs to 49%. See http://jsfiddle.net/mUKSC/ . But this is not an ideal solution because a small gap appears between the two divs.
Another way I am able to solve the problem is by floating both the divs. See http://jsfiddle.net/VptQm/ . This works fine.
But my original question remains. Why when both the divs are kept as inline-block elements, they do not fit side by side?
Update: as it's 2021, use flexbox or even better - CSS grid layout instead of inline-block.
When using inline-block elements, there will always be an whitespace issue between those elements (that space is about ~ 4px wide).
So, your two divs, which both have 50% width, plus that whitespace(~ 4px) is more than 100% in width, and so it breaks. Example of your problem:
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>
There is a few ways to fix that:
1. No space between those elements
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div><div class="right">bar</div>
2. Using HTML comments
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div><!--
--><div class="right">bar</div>
3. Set the parents font-size to 0, and then adding some value to inline-block elements
body{
margin: 0; /* removing the default body margin */
}
.parent{
font-size: 0; /* parent value */
}
.parent > div{
display: inline-block;
width: 50%;
font-size: 16px; /* some value */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="parent">
<div class="left">foo</div>
<div class="right">bar</div>
</div>
4. Using a negative margin between them (not preferable)
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
margin-right: -4px; /* negative margin */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>
5. Dropping closing angle
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div
><div class="right">bar</div>
<hr>
<div class="left">foo</div><div class="right">
bar</div>
6. Skipping certain HTML closing tags (thanks #thirtydot for the reference)
body{
margin: 0; /* removing the default body margin */
}
ul{
margin: 0; /* removing the default ul margin */
padding: 0; /* removing the default ul padding */
}
li{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<ul>
<li class="left">foo
<li class="right">bar
</ul>
References:
Fighting the Space Between Inline Block Elements on CSS Tricks
Remove Whitespace Between Inline-Block Elements by David Walsh
How to remove the space between inline-block elements?
As #MarcosPérezGude said, the best way is to use rem, and add some default value to font-size on the html tag (like in HTML5Boilerplate). Example:
html{
font-size: 1em;
}
.ib-parent{ /* ib -> inline-block */
font-size: 0;
}
.ib-child{
display: inline-block;
font-size: 1rem;
}
good answer in css3 is:
white-space: nowrap;
in parent node, and :
white-space: normal;
vertical-align: top;
in div (or other) at 50%
exemple : http://jsfiddle.net/YpTMh/19/
EDIT:
there is another way with :
font-size: 0;
for parent node and override it in child node
EDIT 2021 : personaly, I recommand use flexbox now : https://the-echoplex.net/flexyboxes/
It's because the whitespace between your two divs is being interpreted as a space. If you put your <div> tags in line as shown below the problem is corrected:
<div id="left"></div><div id="right"></div>
Because there is a space between the elements. If you remove all whitespace, they will fit.
<div id="left">Left</div><div id="right">Right</div>
Either make them block instead of inline-block. This will render divs ignoring spaces between them.
display:block;
or remove space between tags
<div id='left'></div><div id='right'></div>
or add
margin: -1en;
to one of the divs in order to mitigate space taken by single space rendered.
Please check below code:
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
float:left;
}
#right {
width: 50%;
background: orange;
display: inline-block;
float:left;
}
<div id="left">Left</div>
<div id="right">Right</div>
It can be done by adding the css display:inline to the div that holds the inline elements.
While removing the white space using margin with a negative value it becomes necessary to add it to this particular element. As adding it to a class will affect places where this class has been used.
So it would be safer to use display:inline;
Flexbox example - this would be used for the parent class holding the two side by side elements.
.parentclass {
display: flex;
justify-content: center;
align-items: center;
}
Taken from Vertically centering a div inside another div
add float: left; to both div tags.
div {
float: left;
}
How do I put the smiley(yellow background) immediately after the centered word Peter(red background) in this example?
If you give .name the position: relative property, you can declare a pseudo-element for it, which is absolutely positioned.
.name:after {
position: absolute;
left: 100%;
background: yellow;
content: ': )'; /* the space is non-braking */
}
http://jsbin.com/urodit/20/edit
You should be able to do it with floats like this: http://jsbin.com/urodit/26/
Some googling of 3 column layouts may help you find ideas if this isn't exactly what you want too.
.toggle-me {
background-color: green;
float:left;
}
.name {
background-color: red;
float:left;
width:40px;
margin:auto;
}
.description {
background-color: yellow;
width: 20px;
float:left;
}
.container-one{
float:right;
width:100%;
}
.favourite-food {
background-color: orange;
float:left;
}
Check this http://jsbin.com/urodit/30/edit
Added .container-one { text-align: center; } and .name { display: inline-block; } to center the name. Then .description { display: inline-block; } to make it go after the name. Also removed .name { margin: auto; } because it's no longer necessary. And added .name { text-align: left; }.
Note the HTML comment after .name and before .description:
<div class="container-one">
<div class="toggle-me">|Toggle|</div>
<div class="name">Peter</div><!--
--><div class="description">: )</div>
</div>
This is to remove the white space between inline-block elements, caused by the line-breaks and indentation of the code itself. If you don't want to remove the white space just remove the HTML comment.
This is an ugly solution. It is not a nice solution since you need to fiddle with the width of the element that is floated on the right. You also need to put the element that will be on the right of your centered element before the centered element in your html.
If anyone is able to post a cleaner solution I will accept that answer instead of this one.