P tag is pushing down a parent div

Question

I've been trying to put in a paragraph into my div and it keeps pushing down the div. When i put in a normal div it doesn't change and it gets not pushed down. What is the problem here?

I tried to display the p tag as absolute but that is not really professional and it looks ugly. Also i have put a div into the parent div and it worked. It only does that with the p tag.

.mod {
  transition-duration: 0.05s;
  display: inline-block;
  height: 600px;
  width: 337px;
  padding-left: 7px;
  padding-right: 7px;
  position: relative;
  background-color: red;
}

.modpic {
  transition-duration: 0.05s;
  height: 130px;
  width: 337px;
  background-position: center;
  background-size: 686px 430px;
  background-color: grey;
}

.namediv {
  text-align: center;
  width: 100%;
  background-color: blue;
}

.name {
  letter-spacing: 0.3px;
  color: white;
  font-size: 26px;
  font-family: 'Barlow Condensed';
}

<div class="mod">
  <div class="modpic">
  </div>
  <div class="namediv">
    <p class="name">Example</p>
  </div>
</div>

I expect that the p tag gets displayed under the "modpic" but it just messes everything up.

Par Tha · Accepted Answer · 2019-11-05T13:02:53.247

1

By Default Paragraph tag has margin. So do the below code change in your css.

CSS

.name {
    letter-spacing: 0.3px;
    color: white;
    font-size: 26px;
    font-family: 'Barlow Condensed';
    margin: 0;  /* Newly added */
}

#content {
    height: 350px;
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
    display: flex; /* Newly added */
}

OUTPUT

edited Nov 05 '19 at 13:02

answered Nov 05 '19 at 12:51

Par Tha

1,265
7
10

It didnt work... have a jsfiddle for easier understanding here https://jsfiddle.net/0kqdw4cn/1/ – Daniel Jenßen Nov 05 '19 at 12:55
I updated my code and output for your reference. kindly check it . its working fine. – Par Tha Nov 05 '19 at 13:04
Hey thanks it finally worked! – Daniel Jenßen Nov 05 '19 at 13:10

score 0 · Answer 2 · answered Nov 05 '19 at 12:54

A paragraph has margin as a default property. I'd suggest you use a proper CSS Reset.

/* mini-reset */

* {
margin:0;
padding:0;
}
.mod {
  transition-duration: 0.05s;
  display: inline-block;
  height: 600px;
  width: 337px;
  padding-left: 7px;
  padding-right: 7px;
  position: relative;
  background-color: red;
}

.modpic {
  transition-duration: 0.05s;
  height: 130px;
  width: 337px;
  background-position: center;
  background-size: 686px 430px;
  background-color: grey;
}

.namediv {
  text-align: center;
  width: 100%;
  background-color: blue;
}

.name {
  letter-spacing: 0.3px;
  color: white;
  font-size: 26px;
  font-family: 'Barlow Condensed';
}

<div class="mod">
  <div class="modpic">
  </div>
  <div class="namediv">
    <p class="name">Example</p>
  </div>
</div>

P tag is pushing down a parent div

2 Answers2