This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
I am getting a space between my list elements and I can't figure out where it's coming from. Perhaps someone could help.
Here are some screenshots (notice the spacing):
I am using:
.j-tabs .j-tabs-nav { /* All tab elements */
margin: 0;
padding: 0;
}
.j-tabs .j-tabs-tab { /* Non-active, non-hover tab */
display: inline-block;
margin: 0;
list-style: none;
}
I would recommend using flexbox for this or you can use one of the methods listed in the following codepen.
Flex box version:
ul.flexbox {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
http://codepen.io/chriscoyier/pen/hmlqF
Related
Too much trouble in cross-browser testing for Safari since bootstrap 4 has added additional properties for rows the grid format is showing disturbed. i want to show them exactly as in Chrome or Firefox. i have tried all the existing fixes related to this issue but some how it doesn't seems to work for me.
.row::after, .row::before
display: inline-block!important;
width:0px;
height:0px;
Following are the properties of Bootstrap 4 which are not supported in Safari
.row
display: -ms-flexbox; //not supported in Safari
display: flex; //not supported in Safari
-ms-flex-wrap: wrap; //not supported in Safari
flex-wrap: wrap; //not supported in Safari
margin-right: -15px;
margin-left: -15px;
.col-6
-ms-flex: 0 0 50%; //not supported in Safari
flex: 0 0 50%; //not supported in Safari
max-width: 50%; //not supported in Safari
Try setting the ::before and ::after on the row to display:none; as follows:
.row:before, .row:after { display: none !important; }
I'm having trouble with Safari adding a 1px margin/gap to the left on the first element in a flexbox row. I've attached an image below of the issue:
The flex box css is:
.equal-height {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
flex-direction: row;
flex-wrap: wrap;
}
The child elements are set to the following:
.child-div {
float: left;
display: block;
width: 33.3333%;
box-sizing: border-box;
}
But they I have noticed that they are computed with no float
file: style.css;
line: 1028
.row:before, .row:after{
content: " ";
display: table;
}
add:
width: 100%
and now the "margin" is solved.
The grid system you used has problems with safari: change it.
Hope I've helped you.
I've noticed this as well. Here's what worked for me:
.row:before, .row:after {
display: none;
}
The reason they are computed with no float is that flex cancels them.
As per flexbox spec:
float and clear have no effect on a flex item, and do not take it
out-of-flow. However, the float property can still affect box
generation by influencing the display property’s computed value.
So 100% width on the flex container as per Michael is ok, but if you want flexbox, what you want is:
.child-div {
width: 33.3333%;
box-sizing: border-box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
i.e. You need to use either floats or flex, but not both.
You may want to have a look at this flexbox generator to understand how flex works.
<a id="asapg" href="/link/">Text</a>
a#asapg {display: inline-block;cursor: pointer;padding: 15px;text-align: center;border-bottom: 1px solid rgba(121, 119, 119, 0.15);text-transform:uppercase;font-size:16px;width:100%;vertical-align: middle;background: rgba(255,255,255,0.6);min-height: 170px;}
I am trying to vertically center the text in the middle for the link but no luck.
Set the line-height equal to the height of your element (170px?)
a#asapg{
...
height: 170px;
line-height: 170px;
}
You could also use flexbox, CSS3 feature.
a#asapg {
height: 170px;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
align-items:center;/*Vertical align*/
justify-content:center;/*horizontal align*/
}
I used flexbox to spread the list items in the footer navigation across the width of footer.
It is being displayed correctly in my browser and also in Chrome's mobile emulation. However it is ignored on any mobile device I've tested with (iPhone, iPad, Samsung tablet).
Does anyone see anything obvious wrong with the code I'm not aware of?
Below is the CSS/LESS snippet I'm using.
ul {
display: flex;
justify-content: space-between;
width: 100%;
padding: 0;
li {
padding: 0;
}
}
This is happening as display:flex & justify-content: space-between are not compatible in all type of browsers.So we should have a cross-browser compatible CSS like this:
ul {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
width: 100%;
padding: 0;
li {
padding: 0;
}
}
Browser Support for display:flex
IE 11
Edge
FireFox 22+
Chrome 29+
Safari 9+
Opera 17+
Android Browser 4.4+
Browser Support for justify-content: space-between
IE 11
Edge
FireFox 20+
Chrome 52+
Safari 9+
Opera 12.1+
Android Browser 5.6+
Useful Links:
https://caniuse.com/#feat=flexbox
https://caniuse.com/#feat=mdn-css_properties_justify-content_flex_context
https://css-tricks.com/using-flexbox/
.flexcontainer {
display: box;
display: flex;
}
This seems to work…but is it a good idea? I'm trying to get flexbox to work on older Android (2.x) as well as newer iOS and Android browsers.
I found this helpful CSS-tricks article about this very issue. It seems the best way is along these lines:
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */