/    Sign up×
Community /Pin to ProfileBookmark

Unwanted margin or padding

Can someone please tell me why I still have space around my H3 even with margin and padding 0 ?
[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-05-28/1559057612-898105-fbgfbf.png]

to post a comment
CSS

12 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumMay 28.2019 — One needs to view the HTML and CSS, please post the URL or make a Codepen.

I suspect that there is a wrapping container whose width is limited.
Copy linkTweet thisAlerts:
@codyhillauthorMay 28.2019 — @Sempervivum#1604106 here is the github . I hope you can see the files, is the first time i've uploaded something on here :D

link: https://github.com/CodyHiII/My-Portfolio-Site
Copy linkTweet thisAlerts:
@codyhillauthorMay 28.2019 — @Sempervivum#1604106 I just found this in inspect
margin-block-start: 2.33em;
margin-block-end: 2.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;

I don't know what those are...

I tried this but it didn't worked
*{
padding: 0;
margin: 0;
box-sizing: border-box;
margin-block-start: 0;
margin-block-end: 0;
}
Copy linkTweet thisAlerts:
@KeverMay 28.2019 — It's a block element, so it uses the full width of it's parent unless you give it a width. If you don't want space around it you can set it to "display: inline", but then the text wil be moved to the left side of it's parent.

What are you trying to achieve?
Copy linkTweet thisAlerts:
@codyhillauthorMay 28.2019 — @Kever#1604113 doesn't work. and if i do that all the text are inline and I don't want them to be inline
Copy linkTweet thisAlerts:
@KeverMay 28.2019 — What are you trying to achieve? Do you mean the top and bottom margin:? Those are caused by the line-height.
Copy linkTweet thisAlerts:
@SempervivumMay 28.2019 — As I suspected, the wrapping container has a padding:
.contact {
width: 100%;
min-height: 500px;
background-color: #222;
padding: 5%;
}
Copy linkTweet thisAlerts:
@codyhillauthorMay 28.2019 — @Sempervivum#1604117 is not that . That happens everywhere . All of my H's has that . Even if I delete tha padding nothing happens. Only the div shrinks down.
Copy linkTweet thisAlerts:
@SempervivumMay 28.2019 — I cannot spot any margin or padding for that h3. Do you mean the fact that it fills up the complete space in horizontal direction so that there is empty space at the left and the right? If so, you can remove that spaces by setting

display: inline-block;

as kever suggested above.
Copy linkTweet thisAlerts:
@4squarelogicMay 29.2019 — A collapsed margin is what occurs when two block-level elements with meeting vertical margins combine. When this happens, the larger of the two margins (or any if they are equal) is assumed as the single collapsed margin.
Copy linkTweet thisAlerts:
@codyhillauthorMay 29.2019 — @Sempervivum#1604121

This happens to every div , no matter if it has margin or padding .

I also updated the files on github. link here: https://github.com/CodyHiII/My-Portfolio-Site

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-05-29/1559122209-228312-sdcvdsfvfv-01.jpeg]
Copy linkTweet thisAlerts:
@codyhillauthorMay 29.2019 — @Sempervivum#1604121 Fixed it ! Apparently the default line height was bigger then 1 . I don't know how or why.
×

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.12,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...