Bootstrap Extra padding inside divMake a div fill the height of the remaining screen spaceHow to horizontally center a <div>?How to make div not larger than its contents?How to make a div 100% height of the browser window?When to use margin vs padding in CSSClick through div to underlying elementsHow to vertically align an image inside a div?Center a column using Twitter Bootstrap 3What is sr-only in Bootstrap 3?vertical-align with Bootstrap 3
Are there any examples of a variable being normally distributed that is *not* due to the Central Limit Theorem?
Plagiarism or not?
Avoiding direct proof while writing proof by induction
Why didn't Miles's spider sense work before?
Different meanings of こわい
Avoiding the "not like other girls" trope?
Alternative to sending password over mail?
What does the expression "A Mann!" means
Detention in 1997
GFCI outlets - can they be repaired? Are they really needed at the end of a circuit?
What about the virus in 12 Monkeys?
How can saying a song's name be a copyright violation?
Personal Teleportation: From Rags to Riches
Would Slavery Reparations be considered Bills of Attainder and hence Illegal?
How to prevent "they're falling in love" trope
How do I gain back my faith in my PhD degree?
How to compactly explain secondary and tertiary characters without resorting to stereotypes?
How to show a landlord what we have in savings?
Can I run a new neutral wire to repair a broken circuit?
Watching something be piped to a file live with tail
What is the most common color to indicate the input-field is disabled?
Ambiguity in the definition of entropy
Why was the shrinking from 8″ made only to 5.25″ and not smaller (4″ or less)?
Why is this clock signal connected to a capacitor to gnd?
Bootstrap Extra padding inside div
Make a div fill the height of the remaining screen spaceHow to horizontally center a <div>?How to make div not larger than its contents?How to make a div 100% height of the browser window?When to use margin vs padding in CSSClick through div to underlying elementsHow to vertically align an image inside a div?Center a column using Twitter Bootstrap 3What is sr-only in Bootstrap 3?vertical-align with Bootstrap 3
I'm implementing a userscript (in Tampermonkey) for a website I frequently use, and I'm trying to add a div to the page. All's well if I add the div to the top of the page (to the root element):
But as soon as I add it inside a Bootstrap column, I get some annoying extra padding as seen below:
I've tried fiddling with the styling through the Chrome Developer Tools and the only way I could get the padding to disappear was by deleting all the elements occurring before in the column and also setting the ":before" element in the parent row to "display:inline". I think I'm probably misunderstanding how Bootstrap works and there's probably an easy fix, but I've been experimenting for a while and searching online and I haven't found anyone with a similar issue. Does anyone have any idea what might be causing the padding issue, and how I might fix it?
Edit: the Bootstrap version seems to be 3.3.2 (I can't update it as this is a userscript) and the HTML, once inserted, looks like the following (the "project-dropdown" element is the one I have inserted):
The CSS applied to the "project-dropdown" element looks like this:
html css twitter-bootstrap-3
asked Mar 21 at 21:27
jfdomingjfdoming
8261021
|
show 7 more comments
I'm implementing a userscript (in Tampermonkey) for a website I frequently use, and I'm trying to add a div to the page. All's well if I add the div to the top of the page (to the root element):
But as soon as I add it inside a Bootstrap column, I get some annoying extra padding as seen below:
I've tried fiddling with the styling through the Chrome Developer Tools and the only way I could get the padding to disappear was by deleting all the elements occurring before in the column and also setting the ":before" element in the parent row to "display:inline". I think I'm probably misunderstanding how Bootstrap works and there's probably an easy fix, but I've been experimenting for a while and searching online and I haven't found anyone with a similar issue. Does anyone have any idea what might be causing the padding issue, and how I might fix it?
Edit: the Bootstrap version seems to be 3.3.2 (I can't update it as this is a userscript) and the HTML, once inserted, looks like the following (the "project-dropdown" element is the one I have inserted):
The CSS applied to the "project-dropdown" element looks like this:
html css twitter-bootstrap-3
asked Mar 21 at 21:27
jfdomingjfdoming
8261021
Can you share your actual code? Also make sure you are using the correct version of Bootstrap
– IvanS95
Mar 21 at 21:29
While fiddling with the style have you triedpadding: 0 0 0 0 !important?
– Davide Vitali
Mar 21 at 21:31
2
Did you try removing thepaddingon thecolitself?
– IvanS95
Mar 21 at 21:38
1
There’s arowparent class too...
– Davide Vitali
Mar 21 at 21:43
1
I understand that, I guess I'm wondering because I had tried applying the same style everywhere else and it had no effect. Oh well, thanks for the help!
– jfdoming
Mar 21 at 21:46
|
show 7 more comments
I'm implementing a userscript (in Tampermonkey) for a website I frequently use, and I'm trying to add a div to the page. All's well if I add the div to the top of the page (to the root element):
But as soon as I add it inside a Bootstrap column, I get some annoying extra padding as seen below:
I've tried fiddling with the styling through the Chrome Developer Tools and the only way I could get the padding to disappear was by deleting all the elements occurring before in the column and also setting the ":before" element in the parent row to "display:inline". I think I'm probably misunderstanding how Bootstrap works and there's probably an easy fix, but I've been experimenting for a while and searching online and I haven't found anyone with a similar issue. Does anyone have any idea what might be causing the padding issue, and how I might fix it?
Edit: the Bootstrap version seems to be 3.3.2 (I can't update it as this is a userscript) and the HTML, once inserted, looks like the following (the "project-dropdown" element is the one I have inserted):
The CSS applied to the "project-dropdown" element looks like this:
html css twitter-bootstrap-3
asked Mar 21 at 21:27
jfdomingjfdoming
8261021
I'm implementing a userscript (in Tampermonkey) for a website I frequently use, and I'm trying to add a div to the page. All's well if I add the div to the top of the page (to the root element):
But as soon as I add it inside a Bootstrap column, I get some annoying extra padding as seen below:
I've tried fiddling with the styling through the Chrome Developer Tools and the only way I could get the padding to disappear was by deleting all the elements occurring before in the column and also setting the ":before" element in the parent row to "display:inline". I think I'm probably misunderstanding how Bootstrap works and there's probably an easy fix, but I've been experimenting for a while and searching online and I haven't found anyone with a similar issue. Does anyone have any idea what might be causing the padding issue, and how I might fix it?
Edit: the Bootstrap version seems to be 3.3.2 (I can't update it as this is a userscript) and the HTML, once inserted, looks like the following (the "project-dropdown" element is the one I have inserted):
The CSS applied to the "project-dropdown" element looks like this:
html css twitter-bootstrap-3
html css twitter-bootstrap-3
asked Mar 21 at 21:27
jfdomingjfdoming
8261021
asked Mar 21 at 21:27
jfdomingjfdoming
8261021
edited Mar 21 at 21:33
jfdoming
asked Mar 21 at 21:27
jfdomingjfdoming
8261021
asked Mar 21 at 21:27
jfdomingjfdoming
8261021
asked Mar 21 at 21:27
jfdomingjfdoming
8261021
8261021
Can you share your actual code? Also make sure you are using the correct version of Bootstrap
– IvanS95
Mar 21 at 21:29
While fiddling with the style have you triedpadding: 0 0 0 0 !important?
– Davide Vitali
Mar 21 at 21:31
2
Did you try removing thepaddingon thecolitself?
– IvanS95
Mar 21 at 21:38
1
There’s arowparent class too...
– Davide Vitali
Mar 21 at 21:43
1
I understand that, I guess I'm wondering because I had tried applying the same style everywhere else and it had no effect. Oh well, thanks for the help!
– jfdoming
Mar 21 at 21:46
|
show 7 more comments
Can you share your actual code? Also make sure you are using the correct version of Bootstrap
– IvanS95
Mar 21 at 21:29
While fiddling with the style have you triedpadding: 0 0 0 0 !important?
– Davide Vitali
Mar 21 at 21:31
2
Did you try removing thepaddingon thecolitself?
– IvanS95
Mar 21 at 21:38
1
There’s arowparent class too...
– Davide Vitali
Mar 21 at 21:43
1
I understand that, I guess I'm wondering because I had tried applying the same style everywhere else and it had no effect. Oh well, thanks for the help!
– jfdoming
Mar 21 at 21:46
Can you share your actual code? Also make sure you are using the correct version of Bootstrap
– IvanS95
Mar 21 at 21:29
Can you share your actual code? Also make sure you are using the correct version of Bootstrap
– IvanS95
Mar 21 at 21:29
While fiddling with the style have you tried
padding: 0 0 0 0 !important ?– Davide Vitali
Mar 21 at 21:31
While fiddling with the style have you tried
padding: 0 0 0 0 !important ?– Davide Vitali
Mar 21 at 21:31
2
2
Did you try removing the
padding on the col itself?– IvanS95
Mar 21 at 21:38
Did you try removing the
padding on the col itself?– IvanS95
Mar 21 at 21:38
1
1
There’s a
row parent class too...– Davide Vitali
Mar 21 at 21:43
There’s a
row parent class too...– Davide Vitali
Mar 21 at 21:43
1
1
I understand that, I guess I'm wondering because I had tried applying the same style everywhere else and it had no effect. Oh well, thanks for the help!
– jfdoming
Mar 21 at 21:46
I understand that, I guess I'm wondering because I had tried applying the same style everywhere else and it had no effect. Oh well, thanks for the help!
– jfdoming
Mar 21 at 21:46
|
show 7 more comments
1 Answer
1
active
oldest
votes
The project-dropdown element has a parent class col-x-x that introduced left and right padding. On top of that, said column is placed in a row class, introducing top and bottom padding.
Because of the nature of CSS itself, those properties will be “inherited” by children elemen too. To remove all padding, override the default value at the parent col and row classes.
Cheers!
answered Mar 21 at 21:50
Davide VitaliDavide Vitali
694316
Quick follow-up: after a bit more experimentation I discovered that this extra space only gets added if the padding on the parent is of the form 4n+3px (e.g. 3px, 7px...). This seems really weird, any idea why that might be?
– jfdoming
Mar 21 at 21:53
Because therowclass add a negative margin and -more generally - every padding or margin is the sum of the paddings and margin introduced by their parents. Things could get quite messy if not done carefully ;) @jfdoming
– Davide Vitali
Mar 21 at 21:54
That doesn't seem to change anything, I've disabled that CSS and this error still occurs, albeit with different numbers (e.g. 16px).
– jfdoming
Mar 21 at 21:57
In fact, it seems that even if I add* margin: 0 !important; padding: 0 !important;the issue still persists.
– jfdoming
Mar 21 at 21:59
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55289502%2fbootstrap-extra-padding-inside-div%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The project-dropdown element has a parent class col-x-x that introduced left and right padding. On top of that, said column is placed in a row class, introducing top and bottom padding.
Because of the nature of CSS itself, those properties will be “inherited” by children elemen too. To remove all padding, override the default value at the parent col and row classes.
Cheers!
answered Mar 21 at 21:50
Davide VitaliDavide Vitali
694316
Quick follow-up: after a bit more experimentation I discovered that this extra space only gets added if the padding on the parent is of the form 4n+3px (e.g. 3px, 7px...). This seems really weird, any idea why that might be?
– jfdoming
Mar 21 at 21:53
Because therowclass add a negative margin and -more generally - every padding or margin is the sum of the paddings and margin introduced by their parents. Things could get quite messy if not done carefully ;) @jfdoming
– Davide Vitali
Mar 21 at 21:54
That doesn't seem to change anything, I've disabled that CSS and this error still occurs, albeit with different numbers (e.g. 16px).
– jfdoming
Mar 21 at 21:57
In fact, it seems that even if I add* margin: 0 !important; padding: 0 !important;the issue still persists.
– jfdoming
Mar 21 at 21:59
add a comment |
The project-dropdown element has a parent class col-x-x that introduced left and right padding. On top of that, said column is placed in a row class, introducing top and bottom padding.
Because of the nature of CSS itself, those properties will be “inherited” by children elemen too. To remove all padding, override the default value at the parent col and row classes.
Cheers!
answered Mar 21 at 21:50
Davide VitaliDavide Vitali
694316
Quick follow-up: after a bit more experimentation I discovered that this extra space only gets added if the padding on the parent is of the form 4n+3px (e.g. 3px, 7px...). This seems really weird, any idea why that might be?
– jfdoming
Mar 21 at 21:53
Because therowclass add a negative margin and -more generally - every padding or margin is the sum of the paddings and margin introduced by their parents. Things could get quite messy if not done carefully ;) @jfdoming
– Davide Vitali
Mar 21 at 21:54
That doesn't seem to change anything, I've disabled that CSS and this error still occurs, albeit with different numbers (e.g. 16px).
– jfdoming
Mar 21 at 21:57
In fact, it seems that even if I add* margin: 0 !important; padding: 0 !important;the issue still persists.
– jfdoming
Mar 21 at 21:59
add a comment |
The project-dropdown element has a parent class col-x-x that introduced left and right padding. On top of that, said column is placed in a row class, introducing top and bottom padding.
Because of the nature of CSS itself, those properties will be “inherited” by children elemen too. To remove all padding, override the default value at the parent col and row classes.
Cheers!
answered Mar 21 at 21:50
Davide VitaliDavide Vitali
694316
The project-dropdown element has a parent class col-x-x that introduced left and right padding. On top of that, said column is placed in a row class, introducing top and bottom padding.
Because of the nature of CSS itself, those properties will be “inherited” by children elemen too. To remove all padding, override the default value at the parent col and row classes.
Cheers!
answered Mar 21 at 21:50
Davide VitaliDavide Vitali
694316
answered Mar 21 at 21:50
Davide VitaliDavide Vitali
694316
answered Mar 21 at 21:50
Davide VitaliDavide Vitali
694316
answered Mar 21 at 21:50
Davide VitaliDavide Vitali
694316
694316
Quick follow-up: after a bit more experimentation I discovered that this extra space only gets added if the padding on the parent is of the form 4n+3px (e.g. 3px, 7px...). This seems really weird, any idea why that might be?
– jfdoming
Mar 21 at 21:53
Because therowclass add a negative margin and -more generally - every padding or margin is the sum of the paddings and margin introduced by their parents. Things could get quite messy if not done carefully ;) @jfdoming
– Davide Vitali
Mar 21 at 21:54
That doesn't seem to change anything, I've disabled that CSS and this error still occurs, albeit with different numbers (e.g. 16px).
– jfdoming
Mar 21 at 21:57
In fact, it seems that even if I add* margin: 0 !important; padding: 0 !important;the issue still persists.
– jfdoming
Mar 21 at 21:59
add a comment |
Quick follow-up: after a bit more experimentation I discovered that this extra space only gets added if the padding on the parent is of the form 4n+3px (e.g. 3px, 7px...). This seems really weird, any idea why that might be?
– jfdoming
Mar 21 at 21:53
Because therowclass add a negative margin and -more generally - every padding or margin is the sum of the paddings and margin introduced by their parents. Things could get quite messy if not done carefully ;) @jfdoming
– Davide Vitali
Mar 21 at 21:54
That doesn't seem to change anything, I've disabled that CSS and this error still occurs, albeit with different numbers (e.g. 16px).
– jfdoming
Mar 21 at 21:57
In fact, it seems that even if I add* margin: 0 !important; padding: 0 !important;the issue still persists.
– jfdoming
Mar 21 at 21:59
Quick follow-up: after a bit more experimentation I discovered that this extra space only gets added if the padding on the parent is of the form 4n+3px (e.g. 3px, 7px...). This seems really weird, any idea why that might be?
– jfdoming
Mar 21 at 21:53
Quick follow-up: after a bit more experimentation I discovered that this extra space only gets added if the padding on the parent is of the form 4n+3px (e.g. 3px, 7px...). This seems really weird, any idea why that might be?
– jfdoming
Mar 21 at 21:53
Because the
row class add a negative margin and -more generally - every padding or margin is the sum of the paddings and margin introduced by their parents. Things could get quite messy if not done carefully ;) @jfdoming– Davide Vitali
Mar 21 at 21:54
Because the
row class add a negative margin and -more generally - every padding or margin is the sum of the paddings and margin introduced by their parents. Things could get quite messy if not done carefully ;) @jfdoming– Davide Vitali
Mar 21 at 21:54
That doesn't seem to change anything, I've disabled that CSS and this error still occurs, albeit with different numbers (e.g. 16px).
– jfdoming
Mar 21 at 21:57
That doesn't seem to change anything, I've disabled that CSS and this error still occurs, albeit with different numbers (e.g. 16px).
– jfdoming
Mar 21 at 21:57
In fact, it seems that even if I add
* margin: 0 !important; padding: 0 !important; the issue still persists.– jfdoming
Mar 21 at 21:59
In fact, it seems that even if I add
* margin: 0 !important; padding: 0 !important; the issue still persists.– jfdoming
Mar 21 at 21:59
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55289502%2fbootstrap-extra-padding-inside-div%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you share your actual code? Also make sure you are using the correct version of Bootstrap
– IvanS95
Mar 21 at 21:29
While fiddling with the style have you tried
padding: 0 0 0 0 !important?– Davide Vitali
Mar 21 at 21:31
2
Did you try removing the
paddingon thecolitself?– IvanS95
Mar 21 at 21:38
1
There’s a
rowparent class too...– Davide Vitali
Mar 21 at 21:43
1
I understand that, I guess I'm wondering because I had tried applying the same style everywhere else and it had no effect. Oh well, thanks for the help!
– jfdoming
Mar 21 at 21:46