Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do you Put Space between Two Objects in the Same Row?
Using Margin and Padding Properties
Additional spacing can be added to the top, right, bottom, or left of any HTML element. However, before deciding on the type of space to add around the element or object, it is important to understand the difference between margin and padding. Padding is used to surround the element within the border whereas the margin is used for surrounding the element outside the border.
The margin property specifies the amount of space around an HTML element. We can use negative values to overlap content. The child elements do not inherit the values of the margin property. However, we must keep in mind that the top and bottom vertical margins will merge into one another, so the distance between the blocks will only be of the same size or the larger of the two margins in case both are equal.
The following properties are available to set an element's margin.
When setting multiple margin properties in a single declaration, the margin specifies a shorthand property.
The margin-bottom attribute describes an element's bottom margin.
The top margin of an element is defined by the margin-top property.
The margin-left attribute specifies an element's left margin.
The margin-right attribute specifies an element's right margin.
The padding property specifies how much space should appear between an element's content and its border. This attribute's value should be either a length, a percentage, or the word inherit. If the value is inheritable, it will inherit the padding of its parent element. If a percentage is used, it is the percentage of the box that contains it.
The CSS properties listed below can be used to control lists. We can also use the following properties to change the padding on each side of the box.
The padding-bottom property specifies an element's bottom padding.
The padding-top property specifies an element's top padding.
The padding-left property specifies an element's left padding.
The padding-right property specifies an element's right padding.
The padding acts as a shortcut for the properties listed above.
Example
In this example we will use the margin and padding properties to create space between three buttons situated in a single horizontal line.
<!DOCTYPE html>
<html>
<head>
<title> How do you put space between two objects in the same row </title>
<style>
#container {
height: 100px;
width: 300px;
background-color: seashell;
padding: 10px;
}
p {
font-size: 18px;
font-weight: bold;
}
#btn1 {
background-color: red;
}
#btn2 {
background-color: green;
}
#btn3 {
background-color: blue;
}
#btn1, #btn2, #btn3 {
color: white;
font-weight: 555;
padding: 5px;
margin-left: 30px;
}
</style>
</head>
<body>
<div id= "container">
<p id= "para"> This text is capable of changing color. </p>
<div id= "btn">
<button type= "button" id= "btn1" onclick="changeToRed()"> RED </button>
<button type= "button" id= "btn2" onclick= "changeToGreen()"> GREEN </button>
<button type= "button" id= "btn3" onclick= "changeToBlue()"> BLUE </button>
</div>
</div>
<script>
function changeToRed() {
document.getElementById("para").style.color= "red";
}
function changeToGreen() {
document.getElementById("para").style.color= "green"
}
function changeToBlue() {
document.getElementById("para").style.color= "blue"
}
</script>
</body>
</html>
Using Column-Gap Property
The column-gap CSS property specifies the width of the gutter (space) between an element's columns. It takes any of the following values given below.
Normal: Between columns, the browser's default spacing is used. This is specified as 1em for multi-column layout. It is 0 for all other layout types.
<length>: The width of the column gap, expressed as a length. The <length> property must have a non-negative value.
<percentage>: The width of the column gap, expressed as a percentage. The value of the <percentage> property must be non-negative.
Example
In this example, we will use the column-gap property to provide space between flex items.
<!DOCTYPE html>
<html>
<head>
<title> How do you put space between two objects in the same row </title>
<style>
#container {
height: 120px;
width: 400px;
background-color: lightseagreen;
padding: 10px;
}
P {
color: white;
font-size: 20px;
font-weight: bold;
}
button {
background-color: mintcream;
border: 0;
}
#btn {
display: flex;
column-gap: 20px;
}
</style>
</head>
<body>
<div id= "container">
<p id= "para"> We have used the column-gap property to create space between the buttons below. </p>
<div id= "btn">
<button type= "button"> Button 1 </button>
<button type= "button"> Button 2 </button>
<button type= "button"> Button 3 </button>
</div>
</div>
</script>
</body>
</html>
116 Views
To Continue Learning Please Login