It is necessary that the select element occupies the entire width of the block and has indents margins margin: 10px 15px 0 15px; .

The indented style does not work on the right; it is stretched to the full width of the global parent block that does not have indents. If you add this select to the div with the necessary paddings, then everything works fine. But you can't do that, because It is dynamic and is created from the js function.

How to add margin margins to a dynamic select and at the same time leave it independent of other elements?

Layout and styles

 <select> <option value="0">text</option> <option value="571">text</option> </select> select { width: 100%; height: 35px; margin: 10px 15px 0 15px; box-sizing: border-box; }

UPD

Mistaken in the style indicated in the question. But there is no error in the project. Styles are correct, but not working.

  • Do you have a fixed or adaptive / rubber website? - stackanon
  • This is a mobile application for js - Marina Voronova

2 answers 2

The solution is to add together with select div with class. And the indent will work with padding;

It is necessary to abandon the margin because:

http://htmlbook.ru/css/box-sizing

The "box-sizing" property does not affect the margin. Its change takes into account: padding c border and margin skips.

jsFiddle

 create(); function create() { var select = "<div class='place'><select><option value='0'>text</option><option value='571'>text</option><option value='591'>text</option></select>"; $('body').append(select); }; 
  select { width: 100%; height: 35px; } .place{ padding: 10px 15px 0 15px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select><option value="0">text</option><option value="571">text</option><option value="591">text</option></select>

CSS:

 select { width: 100%; height: 35px; } .place{ padding: 10px 15px 0 15px; }
  • one
    clearly, it means that you cannot add indents without an additional diva. and by the way the closing tag is missed in your code - Marina Voronova
  • Thank. When inserting the code did not see. On fiddle compile without problems. :) - Andrew

Tried to fix margin-top: 10px 15px 0 15px; on margin: 10px 15px 0 15px; ?

 select { display: block; width: 100%; height: 35px; margin: 10px 15px 0 15px; box-sizing: border-box; } 
 <select><option value="0">text</option><option value="571">text</option><option value="591">text</option></select>

  • I apologize, I was mistaken in the question. my styles correctly indicated, but does not work - Marina Voronova
  • Then, as I understand it, the problem is that it does not interfere with 100% width (personally it bothers me) ... or ... because here, it seems, indents work regardless of the location of the select. - HamSter