I have a issue about the margin and display in my assignment

Question

I am confused by the margin when I write the code:

Section {
  background-color: #FFFFFF;
  width="100%";
}

p1 {
  font-family: Roboto;
  font-size: 22px;
  font-height: 1px;
  margin-top: 45px;
  margin-left: 165px;
}

p2 {
  font-family: Roboto;
  font-size: 22px;
  font-height: 1px;
  margin-top: 10px;
  margin-left: 165px;
}

<section>
  <p class="p1"> Content 1 </p>
  <p class="p2"> Content 2 </p>
</section>

However, when I don't add the display, the background in section will not cover all the content. when I add the display: inline-block, it will cover but it will have the same first situation when I change display:inline-block to display: inline or display:block. So everyone can explain me what is happening please?

Read about elements display. https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements — Amini, Oct 04 '22 at 10:51
Does this answer your question? [What is the difference between display: inline and display: inline-block?](https://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block) — ThS, Oct 04 '22 at 10:56
Your code is messy, CBroe already pointed out a wrong piece of code. Also `p1` and `p2` are invalid as well, should be `.p1` and `.p2` (class selector) — GreyRoofPigeon, Oct 04 '22 at 11:10

Lukas · Answer 1 · 2022-10-04T11:11:08.967

0

Add overflow:auto or overflow:hidden or overflow:scroll.

section {
    background-color: red;
    width: 100%;
    overflow:auto; // added
}
.p1 {
    font-family: Roboto;
    font-size: 22px;
    margin-top: 45px;
    margin-left: 165px;
}
.p2 {
    font-family: Roboto;
    font-size: 22px;
    margin-top: 10px;
    margin-left: 165px;
}

<section>
  <p class="p1"> Content 1 </p>
  <p class="p2"> Content 2 </p>
</section>

edited Oct 04 '22 at 11:11

answered Oct 04 '22 at 10:53

Lukas

2,263
1
4
15

`width: "100%"` this is **NOT** valid `CSS` ! This must be `width: 100%` (no quotes around the percentage value). – ThS Oct 04 '22 at 10:58
@ths you are right – Lukas Oct 04 '22 at 10:59
`p1` and `p2` are invalid as well, should be `.p1` and `.p2` – GreyRoofPigeon Oct 04 '22 at 11:09
yeah. I just copied it from the author – Lukas Oct 04 '22 at 11:10

score 0 · Answer 2 · answered Oct 04 '22 at 11:20

0

The only issue is with you misused the double quotes in the width property of your section CSS, also the class selectors in your css haven't started with ".", so just update your css it will definately work.

answered Oct 04 '22 at 11:20

Nitin Garg

252
2
9

I have a issue about the margin and display in my assignment

2 Answers2