Remove spacing between a <div> and a <p> tags-CodePudding

I am writing an HTML Document. I am trying to make no space between a p and a div. There were no error messages included.

I have already tried:

adding 0px margin, padding to the p element and div element
making no whitespace between them in the code

Code:

    <head>
        <title>
            ivyghostkit
        </title>
        <link rel="stylesheet" href="common.css" type="text/css">
    </head>

    <body class="t normal">
        <div id="container">
            <div id="IO-out" class="t normal">
                <!-- p elements with class "pn" are added here using javascript -->
            </div>
            <p id="VoidKeyboard"></p>
        </div>
        <script src="g.core.js"></script>
    </body>
</html>

CSS:

/** specific **/
#IO-out {
    width: 100%;
    height: 100%;

    /** make void keyboard work **/
    margin: 0px;
    padding: 0px;
}
.pn {
    margin: 0px;
    padding: 0px;
}
.t {
    color:  white;
    background-color: black;
    font-family: "Roboto Mono", monospace, "wingdings"; /** ;) **/
}
.t.normal {
    color: white;
    background-color: black;
}

For clarification, the problem is that noticeable space is inbetween #VoidKeyboard and all p elements in #IO-out.

CodePudding user response：

Add this in your css file

p{
  margin: 0;
  padding: 0;
}

And add some text in your markup..

Here is the full code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

#IO-out {
    width: 100%;
    height: 100%;

    /** make void keyboard work **/
    margin: 0px;
    padding: 0px;
}
p{
  margin: 0;
  padding: ;
}
.pn {
    margin: 0px;
    padding: 0px;
}
.t {
    color:  white;
    background-color: black;
    font-family: "Roboto Mono", monospace, "wingdings"; /** ;) **/
}
.t.normal {
    color: white;
    background-color: black;
}
  </style>
</head>

    <body class="t normal">
        <div id="container">
            <div id="IO-out" class="t normal">
                p elements with class "pn" are added here using javascript
            </div>
            <p id="VoidKeyboard">Remove Spacing</p>
        </div>
    </body>
</html>