Jump to content

Flexbox: why is that blank space there?

matiasnegro

By matiasnegro
in CSS

 Share

Recommended Posts

matiasnegro Newbie

matiasnegro

Posted
Posted

Hello everyone! I'm practicing flexbox and there's a weird space between my Header and the Navigation Bar that I didn't put (at least intentionally) there and I don't know where it came from. Does anybody know?

Besides, I'd like to make the text in the middle box (The one that says "Lorem ipsum") start at the top-left of the container.

Also, there's a weird space in between each button in the navigation bar, I don't want those spaces there. I'd like the butons to "touch" each other. 

How can I achieve that?

  

<!DOCTYPE html>
<html>
    <head>
<title>Estructura HTML Prototípica</title>
<meta charset="UTF-8">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="description" content="Descripción del contenido de la página">
<meta name="author" content="Nombre del dueño de la página">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">

<style>
body
{background-color: black;}

h1
{background-color: orangered;
text-align: center;
color: white;
padding: 30px;
border: purple;
border-style: solid;}

.navbar
{display: flex;
align-items: flex-start;
background-color: green;
border-style: solid;
border-color: purple;
padding: 10px;
margin: 5px;}

nav a
{background-color: blue;
padding: 5px;
border-style: solid;
border-color: tomato;}

nav a:hover
{background-color: white;
color: red;}
    
.flex-container
{display:flex;
flex-direction: row;
background-color: purple;
justify-content: center;}

.flex-container > div
{background-color: orange;
color: white;
margin: 10px;
padding: 20px;
font-size: 30px;}

@media (max-width: 800px)
{.flex-container
{flex-direction: column;}}

footer
{background-color: tomato;
text-align: center;
color: white;
padding: 5px;}
</style>

<body>
<h1>Header</h1>

<div class="navbar">
<nav>
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</nav>    
</div>

<div class="flex-container">
<div style="flex-grow: 2,5">1</div>
<div style="flex-grow: 5; text-align: center; ">
    <p>Lorem ipsum</p></div>
<div style="flex-grow: 2,5";>3</div>
</div>

<footer>Todos los derechos reservados. 2021.</footer>
</body>

</html>
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Because of collapsing margins, the default margins on the <h1> tag are extending out of its container. If you set the margin of the <h1> to zero it will fix that.

For testing CSS, you should be using the developer tools in your browser, usually available by pressing the F12 key on the keyboard. It will show you all the elements and which styles are affecting them. It will visually display the padding margins and borders.

In CSS, decimal numbers use the point "." instead of a comma ",". It should be flex-grow: 2.5;

  • Like 1
Link to comment
Share on other sites
matiasnegro Newbie

matiasnegro

Posted
  • Author
Posted (edited)

Great, guys. Thanks for the tips and suggestions, everything worked!

But, how do I make the buttons in the navbar "touch" the left border of the navbar? Right now, there's an undesired blank space between the first button (Link 1) and the border of the container.

Edited by matiasnegro
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...