Why is there an extra spacing below my header tag?
I'm using ant.design and React/Redux and want to adjust spacing between elements, but extra space gets added around my paragraph and heading tags.
I've looked around for inline and css styling, but I haven't been able to find what code is causing the extra spacing.
<Row type="flex" justify="center">
<Col>
<h2
style={{
textAlign: "center",
color: GREY_2,
fontFamily: "Lucida Grande",
fontWeight: "bold",
fontSize: 22,
padding: "0px 0px 0px 0px"
}}
>
Online class through infinity2o
</h2>
</Col>
</Row>
I expected a div that has a height of 22px because the font size is 22px, but there is extra spacing around the h2 header and even more spacing below the h2 header.
css react-redux row antd
asked Jan 1 at 1:21
HunterLiuHunterLiu
11912
add a comment |
I'm using ant.design and React/Redux and want to adjust spacing between elements, but extra space gets added around my paragraph and heading tags.
I've looked around for inline and css styling, but I haven't been able to find what code is causing the extra spacing.
<Row type="flex" justify="center">
<Col>
<h2
style={{
textAlign: "center",
color: GREY_2,
fontFamily: "Lucida Grande",
fontWeight: "bold",
fontSize: 22,
padding: "0px 0px 0px 0px"
}}
>
Online class through infinity2o
</h2>
</Col>
</Row>
I expected a div that has a height of 22px because the font size is 22px, but there is extra spacing around the h2 header and even more spacing below the h2 header.
css react-redux row antd
asked Jan 1 at 1:21
HunterLiuHunterLiu
11912
add a comment |
I'm using ant.design and React/Redux and want to adjust spacing between elements, but extra space gets added around my paragraph and heading tags.
I've looked around for inline and css styling, but I haven't been able to find what code is causing the extra spacing.
<Row type="flex" justify="center">
<Col>
<h2
style={{
textAlign: "center",
color: GREY_2,
fontFamily: "Lucida Grande",
fontWeight: "bold",
fontSize: 22,
padding: "0px 0px 0px 0px"
}}
>
Online class through infinity2o
</h2>
</Col>
</Row>
I expected a div that has a height of 22px because the font size is 22px, but there is extra spacing around the h2 header and even more spacing below the h2 header.
css react-redux row antd
asked Jan 1 at 1:21
HunterLiuHunterLiu
11912
I'm using ant.design and React/Redux and want to adjust spacing between elements, but extra space gets added around my paragraph and heading tags.
I've looked around for inline and css styling, but I haven't been able to find what code is causing the extra spacing.
<Row type="flex" justify="center">
<Col>
<h2
style={{
textAlign: "center",
color: GREY_2,
fontFamily: "Lucida Grande",
fontWeight: "bold",
fontSize: 22,
padding: "0px 0px 0px 0px"
}}
>
Online class through infinity2o
</h2>
</Col>
</Row>
I expected a div that has a height of 22px because the font size is 22px, but there is extra spacing around the h2 header and even more spacing below the h2 header.
css react-redux row antd
css react-redux row antd
asked Jan 1 at 1:21
HunterLiuHunterLiu
11912
asked Jan 1 at 1:21
HunterLiuHunterLiu
11912
asked Jan 1 at 1:21
HunterLiuHunterLiu
11912
asked Jan 1 at 1:21
HunterLiuHunterLiu
11912
asked Jan 1 at 1:21
HunterLiuHunterLiu
11912
11912
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
The orange bar on the h1 is the bottom margin. If you want that space to go away, do h1 { margin-bottom: 0; }.
The blue bar containing the text represents line height. To adjust that, do like div { line-height: 8px; }.
Edit: In JSX those properties would be marginBottom and lineHeight, respectively.
answered Jan 1 at 1:42
ram1ram1
3,10953138
add a comment |
H tags typically have default margins without seeing the rest of your css i couldnt know for sure, but would be willing to bet that is your problem.
You could set margin-bottom: 0 if you dont want it like that.
answered Jan 1 at 1:28
I. JohnsonI. Johnson
1316
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%2f53992486%2fwhy-is-there-an-extra-spacing-below-my-header-tag%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The orange bar on the h1 is the bottom margin. If you want that space to go away, do h1 { margin-bottom: 0; }.
The blue bar containing the text represents line height. To adjust that, do like div { line-height: 8px; }.
Edit: In JSX those properties would be marginBottom and lineHeight, respectively.
answered Jan 1 at 1:42
ram1ram1
3,10953138
add a comment |
The orange bar on the h1 is the bottom margin. If you want that space to go away, do h1 { margin-bottom: 0; }.
The blue bar containing the text represents line height. To adjust that, do like div { line-height: 8px; }.
Edit: In JSX those properties would be marginBottom and lineHeight, respectively.
answered Jan 1 at 1:42
ram1ram1
3,10953138
add a comment |
The orange bar on the h1 is the bottom margin. If you want that space to go away, do h1 { margin-bottom: 0; }.
The blue bar containing the text represents line height. To adjust that, do like div { line-height: 8px; }.
Edit: In JSX those properties would be marginBottom and lineHeight, respectively.
answered Jan 1 at 1:42
ram1ram1
3,10953138
The orange bar on the h1 is the bottom margin. If you want that space to go away, do h1 { margin-bottom: 0; }.
The blue bar containing the text represents line height. To adjust that, do like div { line-height: 8px; }.
Edit: In JSX those properties would be marginBottom and lineHeight, respectively.
answered Jan 1 at 1:42
ram1ram1
3,10953138
answered Jan 1 at 1:42
ram1ram1
3,10953138
answered Jan 1 at 1:42
ram1ram1
3,10953138
answered Jan 1 at 1:42
ram1ram1
3,10953138
3,10953138
add a comment |
add a comment |
H tags typically have default margins without seeing the rest of your css i couldnt know for sure, but would be willing to bet that is your problem.
You could set margin-bottom: 0 if you dont want it like that.
answered Jan 1 at 1:28
I. JohnsonI. Johnson
1316
add a comment |
H tags typically have default margins without seeing the rest of your css i couldnt know for sure, but would be willing to bet that is your problem.
You could set margin-bottom: 0 if you dont want it like that.
answered Jan 1 at 1:28
I. JohnsonI. Johnson
1316
add a comment |
H tags typically have default margins without seeing the rest of your css i couldnt know for sure, but would be willing to bet that is your problem.
You could set margin-bottom: 0 if you dont want it like that.
answered Jan 1 at 1:28
I. JohnsonI. Johnson
1316
H tags typically have default margins without seeing the rest of your css i couldnt know for sure, but would be willing to bet that is your problem.
You could set margin-bottom: 0 if you dont want it like that.
answered Jan 1 at 1:28
I. JohnsonI. Johnson
1316
answered Jan 1 at 1:28
I. JohnsonI. Johnson
1316
answered Jan 1 at 1:28
I. JohnsonI. Johnson
1316
answered Jan 1 at 1:28
I. JohnsonI. Johnson
1316
1316
add a comment |
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%2f53992486%2fwhy-is-there-an-extra-spacing-below-my-header-tag%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
