How do you put space between two objects in the same row
Question
I want to make a replica of the google homepage for a homework task, and I can't seem to format the two buttons (Google Search and I'm Feeling Lucky) below. My expected result:
Actual results:
I tried margins and other stuff but nothing seems to work. My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<meta charset="utf-8">
<!-- This link tag is used to link html file with css file -->
<link rel="stylesheet" href="Styles/styles.css">
</head>
<body>
<div class="center">
<center>
<br>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google" width="272" height="92" class="Logo">
<br>
<br>
<form action="https://google.com/search">
<div class="box">
<input maxlength="2048" name="q" type="text" aria-autocomplete="both" aria-haspopup="false" autocapitalize="off" autocomplete="off" autocorrect="off" autofocus role="combobox" spellcheck="false" class="center input">
<input type="submit" value="Google Search" hidden>
</div>
<section>
<div>
<button type="submit" class="button">Google Search</button>
</div>
<div>
<button type="submit" class="button">I'm Feeling Lucky</button>
</div>
</section>
</form>
</center>
</div>
</body>
SCSS:
@font-face {
font-family: "Product Sans";
font-style: normal;
font-weight: 400;
src: local("Open Sans"), local("OpenSans"),
url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2)
format("woff2");
}
body {
font-family: Product Sans;
height: 69.25vh;
}
.center {
align-items: center;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
section{
display: flex;
margin-top: 2%;
width: 23%;
justify-content: space-around;
margin-bottom: 2%;
align-items: center;
}
.box {
width: 580px;
margin: 0px auto;
position: relative;
}
.box .input {
border: 1px solid #ddd;
color: rgba(0, 0, 0, 0.87);
font-size: 16px;
padding: 13px;
padding-left: 45px;
border-radius: 25px;
width: 89.8%;
transition: box-shadow 100ms;
outline: none;
}
.input:hover {
border: 1px solid #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.05), 0 0 2px rgba(0, 0, 0, 0.05),
0 0 3px rgba(0, 0, 0, 0.05), 0 0 4px rgba(0, 0, 0, 0.05),
0 0 5px rgba(0, 0, 0, 0.05), 0 0 4px rgba(0, 0, 0, 0.05),
0 0 5px rgba(0, 0, 0, 0.05);
}
.button {
background-color: #f8f9fa;
border-radius: 6px;
width: 128px;
height: 36px;
border: none;
font-size: 14px;
}
.button:hover {
border: 2px solid #DADCE0;
// box-shadow: 0 0 1px rgba(0, 0, 0, 0.05), 0 0 2px rgba(0, 0, 0, 0.05),
// 0 0 2px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.05),
// 0 0 1px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.05),
// 0 0 1px rgba(0, 0, 0, 0.05);
}
// 255px x 72px
Sorry for asking such a stupid question, but I'm still learning this.
3 answers
solution1
1 ACCPTED 2022-09-12 02:20:33
You can use property column-gap on the section tag to give spaces between flex items, you can learn more about it in here . Like this
div { display: flex; justify-content: center; column-gap: 10px; }
<,DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="styles.css" /> </head> <body> <div> <button>Tes</button> <button>Test2</button> </div> </body> </html>
solution2
0 2022-09-12 01:41:26
In your .button class, add a padding-right of desired spacing. For example, padding-right: 20px . Hope this helps!
solution3
0 2022-09-12 02:19:30
You can research about a gap property that adds space between flex and grid elements. It will suit you too instead of br tags to add vertical space between the image, the form and the set of buttons.
I do not recommend to use padding for this purpose since this property is for inner spacing of an element, between its content and border. Read more about CSS Box Model .
The very common property for spacing between elements is margin. It works not only between flex and grid elements.
I also recommend you to use Developer Tools in Chrome and Firefox browsers to see a clear picture what you are actually getting in browsers and why.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.