1

similar questions is asked several times but my question is more general!

  • FIRST:

for this first question I found an accurate answer here: Display Inline-Block with Widths as Percent

assume that we have a <div> element in an html file and add a few styles to it;

notice that the width is 100% and it should place all over the screen width and shouldn't go out of the screen

(in this snippet the border of the element goes over the screen at the right side!):

body{
margin:0;
}
#section1{
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: xx-large;
  border: red 5px solid;
}
<div id="section1">
  hello
</div>

but, by the answer I found,

if I add box-sizing: border-box; to the css file, the view of the <div> element is going to be alright! and this is ok.

(run this snippeet to see the result):

#section1{
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: xx-large;
  border: red 5px solid;
}
<div id="section1">
  hello
</div>

I didn't have any problems so far, that was only an introduction to understand my second question:

  • SECOND

the aforesaid words doesn't work if we have nested <div> elements!

I searched a lot but it wasn't effective for my example!

and this link is partly answered this question but not much effective!

this is the result that I want: here

this snippet is my sample that the two "hello" lines doesn't take place along eachother!:

body{
  margin: 0;
}
.section2{
  box-sizing: border-box;
  display:inline-block;
  width:50%;
  border: green 2px solid;
}
<div id="section2">
  <div id="section2-1" class="section2"> hello</div>
  <div id="section2-2" class="section2">hello</div>
</div>

what is the easiest way without changing the display property or adding negative margins?!

evan ak
  • 29
  • 7

3 Answers3

0

body{
  margin: 0;
}
.section2{
  box-sizing: border-box;
  display:inline-block;
  width:50%;
  border: green 2px solid;
}
<div id="section2">
  <div id="section2-1" class="section2"> hello</div
  ><div id="section2-2" class="section2">hello</div>
</div>

it is working, but what did i do ? i simply tested with 40%, saw there was a space inbetween your two divs, so just deleted the space (actually a new line with some tabulations)

Neil
  • 390
  • 2
  • 14
  • 1
    thanks that is good, but i don't want remove the indents in my code! – evan ak Aug 31 '17 at 11:42
  • I was just pointing where the problem was, you have a lot of options like putting the `
    ` on the other line starts, some may think it's dirty, but actually that's easier if you tend to forget the `clear:both` after the `float` elements. if it's two elements, this method will not even be visible, ant will not require extra styling :)
     – Neil Aug 31 '17 at 11:47
0

the problem comes from the white space next to the elements, which is produced automatically when you use display: inline-block;

a trick is to remove white spaces as you also have seen here.

if you don't want change the display property and don't remove indentation of your code (white spaces):

the easiest way is to add this properties:

box-sizing: border-box;
float: left;

more about box-sizing property

more about float property

body{
  margin: 0;
}
*{
  box-sizing: border-box;
}
#section1{
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: xx-large;
  border: red 5px solid;
}

#section2{
  display: inline-block;
  width: 100%;
  font-size: xx-large;
  border: blue 3px solid;
}
.section2{
  display:inline-block;
  width:50%;
  border: yellow 5px solid;
  float: left;
}
<div id="section1">
  hello
</div>
<br>
<br>
<br>
<div id="section2">
  <div id="section2-1" class="section2"> hello</div>
  <div id="section2-2" class="section2">hello</div>
</div>
Alireza Kavian
  • 375
  • 2
  • 14
0

Inline-block element are white-space dependent and you could refer this answer to learn more about the difference between display as block, inline and inline-block. There are many ways to remove this white-spacing, from which one is adding font-size 0 to parent div which is here #section2 then manually you could assign font-size to their child element.

body{
  margin: 0;
}
#section2{
  font-size:0;
}
.section2{
  font-size:18px;
  box-sizing: border-box;
  display:inline-block;
  width:50%;
  background: green;
}
<div id="section2">
  <div id="section2-1" class="section2"> hello</div>
  <div id="section2-2" class="section2">hello</div>
</div>
frnt
  • 8,455
  • 2
  • 22
  • 25