Paragraph not moving using left-margin

Question

I'm trying to move every single paragraph by 10 pixels from left using CSS by assigning a left margin of 10px to p. However, they don't seem to be updating

CSS:

.container {
  width: 680px;
  height: 900px;
  background-image: url("images/bgcontainer.jpg");
  overflow: auto;
  left: 10%;
  right: 10%;
  }

p {
  margin-left: 10px;
}

HTML of paragraphs I'm trying to move:

<p align="left">
  <h5 align="left" width="650px">Lorem ipsum dolor sit amet,
    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    <a href="">exercitation ullamco</a>
    laboris nisi ut aliquip ex ea.
  </h5>
</p>

I just want the assigned property of the paragraph written in CSS to be applied and actually move the paragraphs.

The
tag can only contain inline elements. The header tags are block-level elements, and cannot go inside
tags even when you style them to display inline. so You should separate the paragraph,
from the heading,
element or use div instead of p element. — Hiren Vaghasiya, Jun 20 '19 at 07:58

Gregor · Answer 1 · 2019-06-20T08:06:13.527

1

Remove the h5 tag inside of the p tag. Like this it would be invalid HTML anyways. Structure could be like:

<h1>Headline</h1>
<h2>Subheadline</h2>
<p>Some lorem stuff</p>
<h3>Subsubheadline</h3>
<p>More lorem stuff</p>

and so on..

edited Jun 20 '19 at 08:06

answered Jun 20 '19 at 07:59

Gregor

41
1
3

score 0 · Answer 2 · answered Jun 20 '19 at 07:59

Your HTML structure is invalid. Using a heading element inside a paragraph element is impossible. Because the browser will automatically close the p element when it 'sees' a heading tag like <h5> so your html is invalid.

Never nest a heading inside a paragraph.

Second, align is not supported in HTML5. Use css instead or inline styles.

using just a p element ( without a nesting h5 ) will work as intended. See below

  p {
        margin-left: 10px;
    }

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a href="">exercitation ullamco</a> laboris nisi ut aliquip ex ea.</p>

To explain more. Your HTML code will be interpreted by the browser like this

<p></p><h5>heading here<a>link</a></h5></p> Notice that the p is closed before the starting of the h5. So that's why the 'margin-left' doesn't have any effect. Plus you end up with an extra </p> closing tag

Paragraph not moving using left-margin

2 Answers2