Space between div

Question

Space between div

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

Hi what happens is that I want to put a div below the other but as you can see in the code below it is placed on the one above. What do you recommend for me to put immediately down without leaving any space?

#inicio
{
	background-color:#020213;
	color:white;
min-width :100%;
  position:absolute;
  margin-left:auto;
  margin-right:auto;
  margin-top:auto;
  left:0; right:0; top:0;
  

  
  } 

 

ul {
	
	background-color:red;
	position:absolute;
top:0; left:0;
	
	}

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="hola.css"/>
		<title> Cine </title>
	</head >
		<body>
		
		<div id="inicio">
		<h1>
		<p>hola</p>
</div>
       <div id="hola">
	<ul>
		<
		<li><a href="#">inicio</a></li>
		<li><a href="#">inicio</a></li>
		<li><a href="#">inicio</a></li>
		<li><a href="#">inicio</a></li>
		<li><a href="#">inicio</a></li>
		</ul>
		
	</div>
		
		</body>

html css

asked by Axel Aparicio Osorio 12.01.2017 в 04:29

source

2 answers

Access layout elements after the onMarkerClick event Help with this error SQLSTATE [23000]: Integrity constraint violation: 1452 Can not add or update to child row: a foreign key constraint fails

score 1 · Answer 1

To avoid precisely affecting all the elements <p> and <ul> , I would add a small modification to the example CSS in the correction of: Error404

/* SOLO AFECTA A LOS DESCENDIENTES DE div#inicio*/
#inicio p{
  margin: 0;
  font-size: 35px;
}

/* SOLO AFECTA A LOS DESCENDIENTES DE div#hola*/
#hola ul {
   background-color:red;
   top:0; left:0;
   margin: 0;
}

score 0 · Answer 2

First, you have to observe that you leave open labels and others that you do not close them ( h1 , a > that does not belong to anyone ...).

Subsequently, you have to take into account that the paragraphs (element p ), all h1 , h2 , h3 , etc and the lists (element ul ) have a margin by default. To remove that margin you would have to use the margin: 0 property.

If you want to make the letter of the first paragraph bigger, what you can do, instead of using the h1 tag (which has a margin), you can remove the margin from the p tag and change its size source with the font-size property.

You can also see that you do not need to position any element with the position property.

Attention: If you refer to the p element, you will refer to each of the p elements on the page. If you would like to modify one only then you should use a ID or if you would like to apply this style only to a few you would have to apply a class.

Your corrected example:

#inicio
{
  background-color:#020213;
  color:white;
  min-width :100%;
  margin-left:auto;
  margin-right:auto;
  margin-top:auto;
  left:0; right:0; top:0;
} 

p{
  margin: 0;
  font-size: 35px;
}

ul {
   background-color:red;
   top:0; left:0;
   margin: 0;
}

<!DOCTYPE html>
<html>
   <head>
      <link type="text/css" rel="stylesheet" href="hola.css"/>
      <title> Cine </title>
   </head>
   <body>
      <div id="inicio">
          <p>hola</p>
      </div>
      <div id="hola">
         <ul>
            <li><a href="#">inicio</a></li>
            <li><a href="#">inicio</a></li>
            <li><a href="#">inicio</a></li>
            <li><a href="#">inicio</a></li>
            <li><a href="#">inicio</a></li>
         </ul>	
      </div>
   </body>
</html>