html - Remove borders between div -
i have following html page -
<body> <div class="blue" ></div> <div style="padding-bottom: 0; margin-bottom: 0; display: inline-block" > <div class="yellow" style="border-right: none" ></div> <div class="red"></div> <div class="yellow"></div> </div> <div class="green"></div> </body>
the css -
.blue{ background-color: blue; width: 800; height: 100 } .yellow{ background-color: yellow; width: 150; height: 400; display:inline-block; border-right: 0; border-bottom: none; } .red{ background-color: red ; width: 500; height: 400; display: inline-block; padding: 0; border: none; } .green{ background-color: green; width: 800; height: 100; border-bottom:2px solid black; margin-top: 0; padding: 0; border-top: none; }
how can remove borders between yellow div , red? need the box without internal borders. (all div box close.
.blue { background-color: blue; width: 800px; height: 100px; } .container { display: flex; } .yellow { background-color: yellow; width: 150px; height: 400px; display: inline-block; border-right: 0; border-bottom: none; } .red { background-color: red; width: 500px; height: 400px; display: inline-block; padding: 0; border: none; } .green { background-color: green; width: 800px; height: 100px; border-bottom: 2px solid black; margin-top: 0; padding: 0; border-top: none; }
<div class="blue"></div> <div class="container"> <div class="yellow" style="border-right: none"></div> <div class="red"></div> <div class="yellow"></div> </div> <div class="green"></div>
i add display: flex on parent element of yellow , red. instead of inline-block
Comments
Post a Comment