Unexpected right margin from paragraph in html

Question

I'm working on HTML.
I tried to center div in parent.
But there's always right margin extended out of the div.
So, now I changed to just a plain text, but it doesn't solve the problem. How to fix this one?

How is this a duplicate? I don't even know what is block. – Sirawit 'Plum' P. Apr 09 '18 at 19:13 — Sirawit 'Plum' P., Apr 09 '18 at 19:13

score 0 · Answer 1 · answered Apr 09 '18 at 16:59

0

Instead of margin: 0px; Try margin:0 auto;

answered Apr 09 '18 at 16:59

Alex Jimborean

67
9

It results in both left and right margin. – Sirawit 'Plum' P. Apr 09 '18 at 17:06

score 0 · Answer 2 · answered Apr 09 '18 at 16:59

0

Try this one for your code.

<body>
<p class="mydiv">ok</p>
</body>

.mydiv {
width: 20%;
margin: 0 auto;
}

answered Apr 09 '18 at 16:59

Aryan Twanju

2,464
1
9
12

Now there is both left and right margin. – Sirawit 'Plum' P. Apr 09 '18 at 17:04
margin: 0 auto gives you this result. adds equal margins on both side to make the element centered. this is what you wanted, isn't it? – Aryan Twanju Apr 09 '18 at 17:05
I want no margin at all. – Sirawit 'Plum' P. Apr 09 '18 at 17:06
in that case you can do this body { text-align: center; } .mydiv { display: inline-block; width: 20%; } – Aryan Twanju Apr 09 '18 at 17:08

score 0 · Answer 3 · answered Apr 09 '18 at 17:00

Paragraph is a block level element which takes the entire width by default. If you give width 20% remaining space will be filled with margin. If you don't want the remaining margin use inline block element. Check out w3scholl website for block and inline block elements.

score 0 · Accepted Answer · answered Apr 09 '18 at 17:01

0

That margin is because p is a block element.

Add following CSS.

  p.myDiv {
    display: inline-block;
  }

answered Apr 09 '18 at 17:01

Harish Kommuri

2,825
1
22
28

It solved my problem. Thank you. – Sirawit 'Plum' P. Apr 09 '18 at 17:12

score 0 · Answer 5 · answered Apr 09 '18 at 17:08

Centering in CSS: A Complete Guide canu you read CSS TRICKS

Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know which to reach for.

Unexpected right margin from paragraph in html

5 Answers5