How to have horizontal space between two boxes?

**Exequiel** · Jun 29 '14, 06:45 AM

try to use css/css3 for neat coding. . you can use margin, margin-top, margin-bottom, margin-left, margin-right property,
example:

Code:

<style>
.horizontal_div
{
  width:500px;
  height:100px;
  border:1px solid #3D5B9B;
  background: #ccc;
  [B][I]margin: 5px;[/I][/B] /*margin-top:5px;*/
}
</style>

<div class="horizontal_div">div 1</div>
<div class="horizontal_div">div 2</div>
<div class="horizontal_div">div 3</div>

I hope it helps you.

**Sherin** · Jul 24 '20, 11:33 AM

Try This Code

Code:

<!DOCTYPE html> 
<html> 
	<head> 
		<title>Space between flexbox</title> 
		<style> 
			.flex2 { 
				display: flex; 
				justify-content: space-around; 
				background-color: green; 
			} 
			.flex3 { 
				display: flex; 
				justify-content: space-between; 
				background-color: green; 
			} 
			.flex-items { 
				background-color: #f4f4f4; 
				width: 100px; 
				height:50px; 
				margin: 10px; 
				text-align: center; 
				font-size: 40px; 
			} 
			h3 { 
				text-align:center; 
			} 
			.geeks { 
				font-size:40px; 
				text-align:center; 
				color:#009900; 
				font-weight:bold; 
			}					 
		</style> 
	</head> 

	<body> 
		<div class = "geeks">GeeksforGeeks</div> 
		<h3>Space between flexbox</h3> 

		<br> 
		<b>justify-content: space-around </b> 
		<div class="flex2"> 
			<div class="flex-items">1</div> 
			<div class="flex-items">2</div> 
			<div class="flex-items">3</div> 
		</div> 
		<br> 
		<b>justify-content: space-between </b> 
		<div class="flex3"> 
			<div class="flex-items">1</div> 
			<div class="flex-items">2</div> 
			<div class="flex-items">3</div> 
		</div> 
		<br> 
	
	</body> 
</html>

How to have horizontal space between two boxes?

How to have horizontal space between two boxes?

Comment

Comment