CSS - margin between elements without margin/padding? - css

I've been working on my own CSS grid and found this website:
http://demo.select-themes.com/stockholm1/four-column-gallery/
Does anyone have any idea how it's achieved? Basically Portfolio elements have space between them, but there are no margins, paddings, anything I can think of:
<article class="mix portfolio_category_2 mix_all" style=" "><div class="image_holder standard_hover"><span class="image">(...)</article>
2% margin (not sure where it comes from!)
<article class="mix portfolio_category_2 mix_all" style=" "><div class="image_holder standard_hover"><span class="image">(...)</article>
I think it's Bootstrap but bootstrap's grid seems to have margins after all... These items have only bottom margins, but not right/left ones. How it's done?

It is a rule styling the container:
.projects_holder {
...
text-align: justify;
...
}
Try removing it in the development console.

Related

Why is there a white line / extra padding at the end of my Bootstrap grid

Answer found!! Has been posted below. I had a look in the grid.less file and the grid gutter width was being set in there.
I am building a responsive website in bootstrap, compiling with less and grunt.
I have used the bootstrap div class grid col-md-4 to make 3 equal sized grid boxes.
I don't want a border and haven't added one, but on the right hand side of my page there is a white gap on the right next to the scroll bar that I cannot get rid of. Also, when I make the window size smaller there is a white gap between the col-md-12 grid above it. How can I fix this? I have no idea (very new to this) and searching doesn't yield me with any solution so I haven't put an attempt as fixing this as I do not have one. Any suggestions would be fantastic, please.
For the white gap
I have tried adding width:100%; to the override.less CSS file.
here is my code
HTML
<div class="col-md-4">
<div class="text-center"><img src="gridimage1SMALL.png"></div>
<div class="classWithPadTITLES">
<h2><b> <center>Title </center> </b></h2>
</div>
<div class="classWithPad">
<p> content
</p>
</div>
</div>
I have 3 of these, for each grid box.
CSS
.col-md-4 {
background-color:#333; /*replaced old colour rgba(97,7,166,1.00) with grey*/
color:#fff;
font-size:20px;
font-weight:semilight;
height: 450px;
width:100%;
padding:0px;
}
Any help much appreciated, thanks!
I have figured in the variables.less there is some code setting the grid gutter width:
#grid-gutter-width: 30px;
It was at 30px, if I change this to 0px and move it to my overriding variables.less file, I have no white lines anywhere!
As body has some initial margin and padding. Remove that
body{
margin: 0;
padding: 0;
}

bootstrap 2 div left space and height issue

I have created an html stuff with bootstrap 2.3.2 and not 3 The html is having one div with four child div's. The code is as given below
<div class="row-fluid column">
<div class="span3 testOne">Sample One
<br>Sample One
<br>Sample One
</div>
<div class="span3 testTwo">Sample Two
</div>
<div class="span3 testThree">Sample Three
<br>Sample Three
<br>Sample Three
</div>
<div class="span3 testFour">Sample Four
</div>
</div>
The code is working fine but I am facing two issues.
I am getting space in between the child div's
If one child div is big (containing more data) then the small div (containing less data) height is not proportional to the big one
what I expected to achieve is something like as shown below
Can anyone please tell me some solution for this
Note: I can't use flex since it wont work in IE8, also I need to use bootstrap 2.3.2 with proper responsive
JSFiddle
I would make a css tag such as .nomargin{margin-left:0px!important;} and add the class to the relevant divs testOne, testTwo, testThree, testFourand ensure the widths are set correctly
1) The first issue can be solved by downloading the development version of Bootstrap. This has LESS files. Here you can go to /less/variables.less. The variable #gridGutterWidth is set to '20px'. If you make this '0px', the width between the columns will disappear.
You have to compile the less files. You can find out how here: http://lesscss.org/
2) The second issue is harder to solve. It's probably best to use solution #1 (using negative margins) from here:
How can I make Bootstrap columns all the same height?
For css modify class as:
.column{
overflow: hidden;
}
.testTwo{
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.testThree{
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
}

Twitter Bootstrap 3.0 row wider than window

I was fiddling around with Twitter Bootstrap and noticed that my .row was wider than the screen length.
Here is the example
When bootstrap 3.0 came out I did not experience this.
The extra space on the right sides comes from margin-right: -15px;
I have been glaring at this for hours without making any progress on why or how I am fooling myself and searching has not been helpful.
I'm sure I am missing the obvious. I would like to understand why there is this space beyond the window width (forcing a scroller) and how to avoid it. I thought that a row would match 100%
The correct solution (https://getbootstrap.com/docs/3.3/css/#grid-example-fluid) is to use the container-fluid class on the surrounding div:
<div class="container-fluid">
<div class="row">
Content
</div>
</div>
I fixed it by just removing margin-left & margin-right from .row in bootstrap and also by setting it's width to 100%
EDIT >>
This was the previously accepted answer. Undeleted if anyone sites with a old version.
EDIT <<
It is a bug
Which seems to have been unfixed for while. Maybe a proper fix in 3.1.
Best suggestion seems to be "overflow-x: hidden on body element.
https://github.com/twbs/bootstrap/issues/10711
Other than that they added/clarified some of it in this commit
Especially this line "Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .row"
Your rows need to be placed inside a div with the container class applied.
For example
<div class="container">
<div class="row">
Content
</div>
</div>
I resolved this by selecting a specific row, only one was expanding the width of the page, and removing the margins.
footer .row {
margin-left: 0px !important;
margin-right: 0px !important;
}

How to do padding on a fluid row in twitter bootstrap

<div class="internal-wrapper row-fluid">
<div class="Header span12">
<div class="HeaderTitle span6"></div>
<div class="span6"></div>
</div>
</div>
Now, when I do padding on internal-wrapper, I am expecting the padding to effect on the entire grid! inside it. But an overflow is occurring (I think, the right padding is not working)
.internal-wrapper {
padding-left: 30px;
padding-right: 30px;
}
The blue bar below represents Header class. The green box, represents padding! So, Its happening on left but not right
.row-fluid is 100% width. Because it's using a border-box layout, any padding you put is added to that 100%. See http://paulirish.com/2012/box-sizing-border-box-ftw/. However, setting it to use the content-box model will probably cause other problems in Bootstrap.
How to fix it - add an inner element with the padding.
<div class="row-fluid">
<div style="padding-left: 30px; padding-right: 30px;">
...
</div>
</div>
I can't see (or discern) from your post what's wrong, but here's my guess: By placing padding on an element that Bootstrap sizes, you've altered its width. Try putting margin on .Header instead.
If this doesn't help, please create a demo: http://jsfiddle.net/

Inline-Block without margins?

I have several DIV's displayed as inline-blocks; and they seem to be getting spacing automatically applied in between them from the browser. They have margin/padding set to 0. Is there a way to correct this without using negative margins?
Sam, that space you're seeing is actually whitespace. That's why removing the paddings and margins does nothing. Let me explain. When you have this:
HTML
<div>
a
a
a
a
</div>
this is how it's rendered:
a a a a
...right?
So, if you have this:
<div>
<div style="display:inline-block"></div>
<div style="display:inline-block"></div>
<div style="display:inline-block"></div>
</div>
...you'll get the same thing:
block [space] block [space] block
Now... there are many different solutions to this problem. I believe the most common is commenting out the whitespace in the html:
<div>
<div style="display:inline-block"></div><!--
--><div style="display:inline-block"></div><!--
--><div style="display:inline-block"></div>
</div>
I don't like it though - I prefer keeping the html as clean as possible. My preferred way is to set the parent's font-size to 0, and then set back the desired font-size on the inline-blocks themselves. Like so:
div {
font-size: 0; /* removes the whitespace */
}
div div {
display: inline-block;
font-size: 14px;
}
You don't need to use negative margins to offset the original margins.
Instead you can override them with the following:
* { margin:0; }
or:
.div { margin:0; }
if it's element specific.
EDIT:
It appears the problem may be a result of unintended whitespace. For instance:
<div style="display:inline-block">
...
</div>
<div style="display:inline-block">
...
</div>
There exists white space between the two dividers and the browser will print the white space as a result. To fix this, you'll need to change it to:
<div style="display:inline-block">
...
</div><div style="display:inline-block">
...
</div>
Enjoy and good luck!
You can use both display: inline-block and float: left to remove that space.
Here goes plunkr: https://plnkr.co/edit/Sn3NG77asiXO8UrrpxWD?p=preview
Inline-block is originally a IE6 hack
This is what its used for:
To fix the IE6 double-margin bug on floated elements
To place multiple block-like elements on the same horizontal line
without floating them(if you can't float 'exceptional cases)
To allow an inline element to have width and/or height while still
remaining inline
To allow an inline element to have padding or margins
So if you wanna have multiple divs beside eachother please use float, its gonna solve many of your css problems that inline-block can cause, especially cross browser issues
More about inline-block here arcticle 9.2.4
Best regards
SP
please comment if disagree
Another way I have found the method altering the word-spacing on the parent container works for me https://jsfiddle.net/1ex5gpo3/2/
.parent {
word-spacing: -1em;
}
.child {
word-spacing: normal;
display: inline-block;
}

Resources