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 to add space between elements?
In an HTML web page, the space between elements refers to the area around and between different elements, such as text, images, and other HTML elements. There are several ways to add space between elements in web design. One common method is to use CSS (Cascading Style Sheets) to create margins and padding around elements.
Adding space between HTML elements using CSS
Web design often requires adding space between elements to create a visually pleasing layout and improve readability.
Web design has several ways to add space between elements. One common method is to use CSS (Cascading Style Sheets) to create margins and padding around elements. Margins are the space outside of an element, while padding is the space inside of an element. To add space between two elements, we can use the margin property on one of the elements.
For example, if we have two div, we can use the following CSS to add space between them −
div {
margin-bottom: 10px;
}
This will add 10 pixels of space between each div.
By using padding, we can also add space between elements. Padding works similarly to margins, but it affects the space inside of an element rather than outside of it.
For example, if we have a div with text inside, we can use the following CSS to add space between the text and the edges of the div −
div {
padding: 20px;
}
This will add 20 pixels of padding around all four sides of the div.
Example
In this example we are using the margin-top property.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color:pink;
}
.div1{
margin:auto;
background: #6ffc03;
border: 1px solid black;
width: 250px;
height: 200px;
}
button{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="div1">
<button>Button 1</button><br>
<button>Button 2</button>
</div>
</body>
</html>
Example
In this example we are using the padding property.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color:pink;
}
.div2{
background: #6ffc03;
border: 1px solid black;
padding:30px;
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<div class="div2">Padding 30</div>
</body>
</html>
Conclusion
Adding space between elements in web design we are using margins and padding in CSS. These properties can be used to create consistent spacing around elements and control the size of elements and their space. The box-sizing, grid-gap, and gap property can also be used to control the size of elements and their space.
47K+ Views
